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


200

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?



De nos jours, vous pouvez inclure et styliser des fichiers externes via <symbol>et <use>. Voir cette réponse .
totymedli

Réponses:


218

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.


7
Est-ce que cela fonctionne toujours avec Chrome? J'ai du mal à changer la couleur de mon chemin SVG avec CSS.
Dallas Clark

5
Merci Nicholas, je crois avoir trouvé la raison. Mon SVG a été intégré à la page via une balise <img>, CSS ne semble pas pouvoir modifier le contenu qu'il contient. Est-ce correct?
Dallas Clark

40
Gardez à l'esprit que pour que CSS puisse styliser le SVG, vous devez inclure le code SVG dans le balisage, cela ne fonctionne pas si vous incluez le SVG via la <svg>balise.
Ricardo Zea

2
@RicardoZea Une mise en garde à cela: vous pouvez inclure un objet à partir d'un fichier SVG externe avec <use href="external.svg#objId" />et votre CSS local s'appliquera toujours dans une certaine mesure.
Ken Bellows

1
@KenBellows C'est vrai, je l'ai appris maintenant. Une chose à noter est que nous devons utiliser des propriétés spécifiques SVG dans le CSS, sinon cela ne fonctionnera pas. Par exemple, pour modifier la couleur d'arrière-plan que vous utilisez fill: #000;au lieu de background: #000;.
Ricardo Zea

39

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

path:hover{
  fill:red;
}

28

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.


2
Techniquement correct sur la base du libellé de la question "... d'autres moyens sans réellement le changer dans la balise de chemin" et a fonctionné exactement comme j'avais besoin. Ayez un vote positif!
Travis Watson

5
Comment est-ce une réponse? La question est sur CSS, pas natif SVG
zhuhang.jasper

2
Avez-vous une réponse de votre propre M. Jasper?
Samuel Ramzan

2
Ce n'est pas une réponse. C'est la distorsion de la question.
QMaster

16

vous mettez ce css pour le cercle svg.

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

8

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

4

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>

"Supprimer tout remplissage / trait" - supprimer le remplissage et le trait peut casser les svg (du moins le mien, lorsque je fais cela dans mon idée et que je regarde le résultat dans une fenêtre d'aperçu). Alternativement, on peut utilisercurrentColor
Frank Nocke

4

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

2

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.


Bienvenue sur StackOverflow, Neto. Cela ressemble à une bonne réponse. Merci pour ton aide.
srm
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.