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 tout autre moyen sans le changer réellement à l'intérieur de la balise path?

Oui, vous pouvez appliquer CSS à SVG, mais vous devez faire correspondre l'élément, tout comme lors du 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' fillattribut du chemin , au moins dans les navigateurs WebKit et Gecko que j'ai testés. Bien sûr, si vous écrivez, disons, <path style="fill: green">cela remplacera également le CSS externe.

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

path:hover{
  fill:red;
}

Si vous allez dans le code source d'un fichier SVG, vous pouvez changer la couleur de remplissage 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.

vous mettez ce css pour le cercle svg.

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

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

Il y a une poignée de solutions expliquées ici.

J'ai préféré celui qui nécessitait un minimum de modifications du svg source, et je n'ai pas non plus exigé qu'il soit intégré dans le document html. Cette option utilise la <object>balise.

Ajoutez le fichier svg dans votre html en utilisant <object>; J'ai également déclaré des attributs html widthet height. En utilisant ces largeurs et hauteurs, le document svg n'est pas mis à l'échelle, j'ai travaillé autour de cela en utilisant une transform: scale(...)instruction css pour la svgbalise dans 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 SVG source a été mis à l'échelle à 16 pixels, je l'ai mis à l'échelle à 64 avec un facteur de quatre. Il n'avait qu'un seul chemin, donc je n'avais pas besoin de le sélectionner plus spécifiquement, mais le chemin avait un attribut fill, donc j'ai dû utiliser !IMPORTANTpour forcer le CSS à prendre le précédent.

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

Modifiez votre fichier svg cible, avant la <svgbalise d' ouverture , pour inclure une feuille de style; Notez que le href est relatif à l'url du fichier svg.

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

Vous pouvez utiliser cette syntaxe mais elle 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>

Il est possible de changer la couleur de remplissage du chemin du svg. Voir ci-dessous pour l'extrait CSS:

1. Pour appliquer la couleur pour tout le chemin: svg > path{ fill: red }

2. Pour postuler au premier chemin d: svg > path:nth-of-type(1){ fill: green }

3. Pour postuler au deuxième chemin d: svg > path:nth-of-type(2){ fill: green}

4. Pour postuler pour le chemin d différent, modifiez uniquement le numéro de chemin:
   svg > path:nth-of-type(${path_number}){ fill: green}

5. Pour prendre en charge le CSS dans Angular 2 à 8, utilisez le concept d'encapsulation:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

Mettez tous vos svg:

fill="var(--svgcolor)"

En CSS:

:root {
  --svgcolor: tomato;
}

Pour utiliser des pseudo-classes:

span.github:hover {
  --svgcolor:aquamarine;
}

Explication

racine = page html.
--svgcolor = une variable.
span.github = sélectionner un élément span avec un github de classe, une icône svg à l'intérieur et affecter un survol de pseudo-classe.