Heim  >  Artikel  >  Web-Frontend  >  Können Sie ein SVG-Hintergrundbild direkt mit CSS formatieren?

Können Sie ein SVG-Hintergrundbild direkt mit CSS formatieren?

Susan Sarandon
Susan SarandonOriginal
2024-11-08 07:07:01486Durchsuche

Can You Directly Style an SVG Background Image with CSS?

Ein SVG-Hintergrundbild mit CSS gestalten

Können Sie CSS-Stile direkt auf ein SVG-Bild anwenden, das als Hintergrundbild verwendet wird?

Während die Verwendung von SVGs als Hintergrundbilder üblich ist, wird die Erweiterung des CSS-Stils auf die SVG selbst nicht direkt unterstützt. Die SVG-Datei und die CSS-Datei existieren als separate Einheiten, was die Inline-Styling-Möglichkeiten einschränkt.

Im bereitgestellten CSS-Beispiel:

element1 {
  background-image(icon.svg);
}

element1.black .svg-pathclass {
  fill: #000000;
}

element1.white .svg-pathclass {
  fill: #ffffff;
}

Der Versuch besteht darin, die Füllfarbe eines Pfads darin zu ändern die SVG basierend auf der Klasse des Elements. Dies ist jedoch nicht möglich, da die SVG-Datei als Bild und nicht als Live-Code in der CSS-Datei gerendert wird.

Um den gewünschten Effekt zu erzielen, müssen Sie die Stile in der SVG-Datei selbst vordefinieren oder auf die SVG-Datei zugreifen über JavaScript, um die Farben dynamisch zu manipulieren.

Das obige ist der detaillierte Inhalt vonKönnen Sie ein SVG-Hintergrundbild direkt mit CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn