So ändern Sie die SVG-Farbe mit CSS

In CSS können Sie das Strichattribut verwenden, um die Farbe von SVG zu ändern. Sie müssen nur den Stil „Strich: Farbwert“ für das Polylinien-Tag in SVG festlegen. Das Strichattribut definiert eine Linien-, Text- oder Elementumrissfarbe. Der Wert ist derselbe wie die Farbe und unterstützt den transparenten RGBA-Kanal.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Manchmal verwenden wir CSS zur direkten Steuerung. SVG kann in Form von Bildern wie JPG und PNG oder direkt in Form von Tags verwendet werden. Ersteres kann die Farbe nicht einstellen, letzteres jedoch schon.

Beispiel:

<svg width="8px" height="12px" viewBox="0 0 8 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>Rectangle 8 Copy 10</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <polyline id="Rectangle-8-Copy-10" stroke="#8F99AE" stroke-width="2" transform="translate(2.242641, 6.242641) scale(1, -1) rotate(-135.000000) translate(-2.242641, -6.242641) " points="5.24264069 9.24264069 -0.757359313 9.24264069 -0.757359313 3.24264069 -0.757359313 3.24264069"></polyline>
    </g>
</svg>

Effekt:

Fügen Sie den Code hinzu, um die Farbe zu ändern

 svg g polyline {
    stroke: red;
}

Effekt:

Empfohlenes Lernen: CSS-Video

Das obige ist der detaillierte Inhalt vonSo ändern Sie die SVG-Farbe mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!