web-dev-qa-db-fra.com

Puis-je changer la couleur de remplissage d'un chemin svg avec CSS?

J'ai le code suivant:

  <span>
     <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/>
        <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>&nbsp;
  </span>

Est-il possible de changer la couleur de remplissage du chemin SVG avec CSS ou un autre moyen sans le changer réellement dans la balise path?

csssvg
163
Samantha J T Star

Oui, vous pouvez appliquer CSS à SVG, mais vous devez faire correspondre l'élément, comme pour le style HTML. Si vous souhaitez simplement l'appliquer à tous les chemins SVG, vous pouvez utiliser, par exemple:

​path {
    fill: blue;
}​

Le CSS externe semble remplacer l’attribut fill du chemin, du moins dans les navigateurs WebKit et Gecko que j’ai testés. Bien sûr, si vous écrivez, par exemple, <path style="fill: green">, cela remplacera également le CSS externe.

187
Nicholas Riley

si vous voulez changer de couleur en survolant l'élément, essayez ceci:

path:hover{
  fill:red;
}
36
Mark Esluzar Diamat

Si vous entrez dans le code source d'un fichier SVG, vous pouvez modifier le remplissage de couleur en modifiant la propriété de remplissage.

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

Utilisez votre éditeur de texte préféré, ouvrez le fichier SVG et jouez avec.

22
Samuel Ramzan

vous mettez ce css pour cercle svg.

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}
14
Dulendra Singh

Je suis tombé sur une ressource incroyable sur css-tricks: https://css-tricks.com/using-svg/

Il existe une poignée de solutions expliquées ici.

J'ai préféré celui qui nécessitait un minimum de modifications du fichier source svg, et qui ne nécessitait pas d'être intégré dans le document html. Cette option utilise la balise <object>.

Ajoutez le fichier svg dans votre code HTML en utilisant <object>; J'ai également déclaré les attributs HTML width et height. En utilisant ces largeurs et hauteurs, le document svg n'est pas mis à l'échelle. J'ai corrigé cette situation à l'aide d'une instruction css transform: scale(...) pour la balise svg de mon fichier css svg associé.

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

Créez un fichier CSS à joindre à votre document svn. Mon chemin source svg a été redimensionné à 16px, je l’ai converti à 64 avec un facteur de quatre. Il ne comportait qu'un seul chemin, je n'avais donc pas besoin de le sélectionner plus précisément. Cependant, le chemin comportait un attribut de remplissage. Je devais donc utiliser !IMPORTANT pour forcer le fichier css à créer un précédent.

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

Editez votre fichier svg cible, avant la balise d’ouverture <svg, pour inclure une feuille de style; Notez que la href est relative à l'URL du fichier svg.

<?xml-stylesheet type="text/css" href="myfile.css" ?>
6
ThorSummoner

Vous pouvez utiliser cette syntaxe, mais cela nécessitera quelques modifications dans le fichier SVG. Et supprimez tout remplissage/trait du SVG lui-même.

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g, 
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>
1
Ahmed Hakim