Um SVG mit CSS zu stylen, müssen Sie zuerst die SVG -Inline in HTML einbetten, um eine feine Kontrolle zu erhalten. 1. Inline SVG erm?glicht es, seine internen Elemente wie oder direkt auszuw?hlen und Stile über CSS anzuwenden, w?hrend externe SVG nur globale Stile wie Breite und H?he oder Filter unterstützt. 2. Verwenden Sie die regul?re CSS-Syntax wie .class: HOVER, um interaktive Effekte zu erzielen, aber verwenden Sie Füll anstelle von Farbe, um die Farbe zu steuern, und verwenden Sie Hub und Schlaganfall, um den Umriss zu steuern. 3. Verwenden Sie Klassennamen, um Stile zu organisieren, um Doppelarbeit zu vermeiden und auf Namenskonflikte und das Umfangsmanagement zu achten. 4. Der SVG -Stil kann von der Seite erben und kann durch SVG * {fill: Keine zurückgesetzt werden; Schlaganfall: Keine; } Um unerwartete Ergebnisse zu vermeiden. Nach dem Beherrschen dieser Schlüsselpunkte k?nnen Sie CSS effizient verwenden, um den SVG -Stil zu steuern.

SVGs sind heutzutage überall - Logos, Ikonen, Illustrationen - und einer der gro?en Vorteile ist, dass Sie sie wie HTML -Elemente mit CSS stylen k?nnen. Es macht sie flexibel und leicht in das moderne Webdesign zu integrieren. Wenn Sie jedoch versucht haben, Stile auf SVG anzuwenden und auf Probleme zu sto?en, sind Sie nicht allein. Es gibt ein paar Gotchas, über die man sich bewusst ist.

Inline SVG gegen externe SVG

Wie Sie Ihre SVG in eine Seite aufnehmen, wirkt sich darauf aus, wie Sie sie stylen k?nnen.

• INLINE SVG : Dies bedeutet, den tats?chlichen <svg></svg> -Coder direkt in Ihr HTML einzufügen. Das gro?e Plus hier ist, dass Sie seine Elemente (wie <path></path> , <circle></circle> usw.) direkt mit CSS ansprechen k?nnen.
• EXTERNAL SVG : Wenn Sie das SVG über ein <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175211922987577.png" class="lazy" alt="Anwenden von CSS -Stilen auf skalierbare Vektorgrafiken (SVG)" > -Tag- oder Hintergrundbild in CSS laden, verlieren Sie direkten Zugriff auf interne Elemente. In diesem Fall k?nnen Sie nur globale Stile wie Breite, H?he oder Filter von au?en anwenden.

Wenn Sie also eine feink?rnige Kontrolle über Farben, Animationen oder Schwebeffekte innerhalb des SVG wünschen, gehen Sie in der Inline.

Styling SVG -Elemente mit CSS

Sobald Ihr SVG inline ist, k?nnen Sie viele seiner Elemente wie normales HTML in Bezug auf das Styling behandeln.

Sie haben beispielsweise m?glicherweise ein Logo, in dem die Hauptform die Farbe bei schwebem Umfang ver?ndert:

 <Svg>
  <path class = "logo-main" d = "M10 10 ..." />
</svg>

Und in Ihrem CSS:

 .Logo-main {
  Füllung: #333;
}

.Logo-main: Hover {
  FILL: #09f;
}

Einige wichtige Punkte:

• Verwenden Sie fill anstelle von color oder background-color für Formen und Pfade.
• stroke umrissen und stroke-width passt ihre Dicke an.
• Sie k?nnen diese Eigenschaften auch mit überg?ngen oder Keyframes animieren.

Denken Sie nur daran, dass einige ?ltere Browser für bestimmte CSS -Funktionen, die auf SVG angewendet werden, nur begrenzt unterstützt werden.

Verwenden von Klassen und Scoped -Stilen

Wie bei HTML k?nnen Sie Klassen innerhalb von SVG verwenden, um Stile zu organisieren und sich zu wiederholen.

Nehmen wir an, Ihr SVG hat mehrere Teile:

 <Svg>
  <circle class = "dot prim?r" cx = "50" cy = "50" r = "10" />
  <circle class = "dot secondary" cx = "100" cy = "50" r = "10" />
</svg>

Sie k?nnen wiederverwendbare Stile in Ihrem CSS definieren:

 .dot {
  übergang: 0,3s Leichtigkeit füllen;
}

.primary {
  Füllung: Rot;
}

.Secondary {
  Füllung: Blau;
}

Ein paar Tipps:

• Stellen Sie sicher, dass Ihre Klassennamen nicht mit anderen Stilen auf der Seite zusammenkommen.
• Erw?gen Sie, das SVG in einen Beh?lter zu wickeln und bei Bedarf Scoped -Stile zu verwenden.
• BEM oder ?hnliche Namenskonventionen k?nnen dazu beitragen, die Dinge organisiert zu halten.

Dieser Ansatz h?lt Ihren Code sauber und wartbar, insbesondere wenn SVGs komplexer werden.

Achten Sie auf Spezifit?t und Erbschaft

SVG -Elemente k?nnen Stile von der Seite erben, was praktisch, aber manchmal verwirrend ist.

Wenn Sie beispielsweise eine fill auf das Element <svg> selbst festlegen, nimmt untergeordnete Elemente ohne eigene fill das automatisch auf. Das kann nützlich sein, um zu thematisieren:

 svg {
  FILL: CurrentColor;
}

Dann k?nnen Sie einfach die color an anderer Stelle ?ndern, und das SVG folgt mit.

Dies bedeutet aber auch, dass unerwartete Ergebnisse auftauchen k?nnen, wenn Sie mit Selektorspezifit?t oder widersprüchlichen Regeln nicht vorsichtig sind. Ein guter Trick ist das Zurücksetzen ererbter Stile bei Bedarf:

 svg * {
  Füllung: Keine;
  Schlaganfall: Keine;
}

Auf diese Weise fangen Sie frisch an und definieren genau das, was Sie wollen.

Grunds?tzlich ist das. Das Styling von SVG mit CSS ist leistungsstark, wenn Sie wissen, wie es funktioniert. Es erfordert jedoch Aufmerksamkeit dafür, wie SVG -Attribute an CSS -Eigenschaften abgeben und wie die Datei auf der Seite enthalten ist.

Das obige ist der detaillierte Inhalt vonAnwenden von CSS -Stilen auf skalierbare Vektorgrafiken (SVG). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!