Heim > Web-Frontend > CSS-Tutorial > Kann ich die Füllfarbe eines SVG-Pfads mit CSS ändern?

Kann ich die Füllfarbe eines SVG-Pfads mit CSS ändern?

Patricia Arquette
Freigeben: 2024-11-07 02:34:03
Original
654 Leute haben es durchsucht

Can I Change the Fill Color of an SVG Path with CSS?

SVG-Pfade dynamisch mit CSS einfärben

Kann ich die Füllfarbe eines SVG-Pfades mit CSS ändern?

Überlegen Sie der folgende SVG-Code:

<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
  <desc></desc>
  <defs></defs>
  <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
</svg>
Nach dem Login kopieren

Ist es möglich, die Füllfarbe des SVG-Pfads mithilfe von CSS oder einer anderen Methode zu ändern, ohne sie explizit innerhalb des zu ändern? Tag?

Antwort:

Ja, es ist möglich, SVG-Elemente mit CSS zu formatieren. Sie müssen das Element jedoch genau so als Ziel festlegen, wie Sie es auch bei der Formatierung von HTML tun würden. So wenden Sie den Stil beispielsweise auf alle SVG-Pfade an:

path {
  fill: blue;
}
Nach dem Login kopieren

Externes CSS überschreibt in Browsern wie WebKit und Gecko tendenziell das Füllattribut des Pfads. Beachten Sie jedoch Folgendes: Wenn Sie eine Füllfarbe direkt im Tag (z. B. ), überschreibt es alle externen CSS-Stile.

Das obige ist der detaillierte Inhalt vonKann ich die Füllfarbe eines SVG-Pfads mit CSS ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage