Maison  >  Article  >  interface Web  >  Comment changer la couleur SVG avec CSS

Comment changer la couleur SVG avec CSS

醉折花枝作酒筹
醉折花枝作酒筹original
2021-04-20 16:07:1924838parcourir

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.

Comment changer la couleur SVG avec CSS

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 :

Comment changer la couleur SVG avec CSS

Ajouter un code pour changer la couleur

 svg g polyline {
    stroke: red;
}

Effet :

Comment changer la couleur SVG avec CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Comment mettre en gras en CSSArticle suivant:Comment mettre en gras en CSS