18041 sujets

Questions générales et questions de débutants

SVG et cascade CSS

Salut,

Question concernant les SVG sprites et les CSS : j'ai un fichier SVG, inclus en début de page, avec des <use>à différents endroits de la page. Mais apparemment, je ne peux pas cibler une sous-partie du symbole utilisé, typiquement pour une règle genre
a:hover .classeInterneAuSVG {fill: #f00;}


J'ai trouvé un workaround en mettant 2 symboles dans mon svg, un pour l'état défaut, et un pour le hover, et en jouant sur leur display, mais j'aimerais bien ne pas gaspiller un symbole et un <use>. Comment faire ?

Merci
Modifié par Marvin Le Rouge (19 Aug 2015 - 12:24)
Bonjour Marvin Le Rouge,

Effectivement, il n'est pas possible de modifier directement l'apparence des éléments internes d'un SVG appelé à travers un <use>.

Il existe pourtant une solution, qui consiste en l'utilisation de l'héritage en CSS. Par contre, elle ne te permettra de ne modifier qu'une couleur de ton SVG, ce qui nous amène à la même problématique que les icon-font.

En gros, si tu as un code comme celui-ci en haut de ton <body> et que tu veux pouvoir changer la couleur des éléments .fill-color1 :
<svg>
  <symbol id="symbolSvg">
    <path class="fill-color1" />
    <path class="fill-color1" />
    <path class="fill-color2" />
  </symbol>
</svg>


Tu mets en place un CSS comme celui-ci :
svg .fill-color1 {
  fill: inherit;
}
svg .fill-color2 {
  fill: red;
}


Et donc maintenant, tu as un des éléments qui changera de couleur selon la cascade CSS ! Smiley smile
Il te suffit de l'appeler via un <use> :
<svg class="test"><use xlink:href="#symbolSvg"></use></svg>


Et d'y appliquer la couleur que tu veux, sur l'élément svg concerné :
.test {
  fill: blue;
}


Et donc, avec ce code, tu auras un SVG avec une partie systématiquement rouge, et l'autre qui change de couleur selon la cascade CSS ! Smiley smile
Mhh c'est bien ce que je pensais : il doit y avoir un système d'isolation entre les espaces du document html et du document svg, qui empêche lescss de se référer aux 2 espaces de nommage simultanément.
Bon, tant pis, je vais devoir rester sur le principe du double symbole, qui permet la personnalisation complète du svg avec des classes différentes.

Merci
Ou alors, si tu en as l'occasion, tu peux insérer le SVG complet inline à l'endroit souhaité en PHP par exemple.
Du coup, aucun soucis pour modifier les éléments internes au SVG.
Sujet clos
Aller à