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

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>

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;
}

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!