Comment changer la couleur SVG avec CSS

En CSS, vous pouvez utiliser l'attribut Stroke pour changer la couleur du SVG. Il vous suffit de définir le style "Stroke: Color Value" pour la balise polyline en SVG. L'attribut Stroke définit la couleur du contour d'une ligne, d'un texte ou d'un élément. La valeur est la même que la couleur et prend en charge le canal transparent rgba.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Parfois, nous pouvons utiliser CSS pour contrôler directement SVG. Le SVG peut être utilisé sous forme d'images comme jpg et png, ou directement sous forme de balises. Le premier ne peut pas définir la couleur, mais le second le peut.

Exemple :

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

Effet :

Ajouter un code pour changer la couleur

 svg g polyline {
    stroke: red;
}

Effet :

Apprentissage recommandé : tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!