Le SVG en ligne peut être «stylisé» dans le sens où il a déjà des remplissages et des traits et ainsi de suite à la seconde où vous le mettez sur la page. C'est génial et une très bonne façon d'utiliser SVG en ligne. Mais vous pouvez également styliser SVG en ligne via CSS, ce qui est plutôt génial car, j'imagine pour beaucoup d'entre nous, CSS est l'endroit où nous nous sentons puissants et à l'aise.
Cela fonctionne à peu près comme vous vous attendez. Voici un exemple simple:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS a un peu plus de puissance, pourrait-on dire, que les attributs de style sur les éléments SVG eux-mêmes. Si cela avait fill="red"du goût, le CSS «gagnerait» encore. Vous pourriez penser le contraire, car il semble que les attributs de style seraient puissants comme les styles en ligne, mais ils ne le sont pas. Les styles en ligne sont cependant toujours puissants.
De même, les règles CSS ne tombent pas en cascade s'il se produit quelque chose de plus spécifique. Par exemple:
.parent ( fill: red; )Le CSS perd dans ce cas, car le bleu est appliqué plus spécifiquement au rect.
Si je prévois de styliser SVG via CSS, je trouve généralement plus facile de laisser les attributs de style entièrement hors des éléments SVG.
Chose importante à savoir alerte!
Nous avons passé du temps à en parler . Dites que c'est la situation:
En fin de compte, cet «enfant» est placé dans ce «parent», n'est-ce pas? Droit. Alors ça devrait marcher?
.parent .child ( fill: red; )Mais ce n'est pas le cas.
Comme ça fonctionne, il clone cela et le met dans un "Shadow DOM" dans ce second SVG. Vous ne pouvez pas pénétrer dans ce DOM shadow avec un sélecteur comme celui-là. Ça ne marche pas. Peut-être qu'un jour il y aura une solution, mais il n'y en a pas pour le moment.
Vous pouvez faire comme:
.parent ( fill: red; )Et ce remplissage se répercutera en cascade et affectera les éléments enfants s'il n'y a rien de plus spécifique dans le chemin. Ou
.child ( fill: red; )et affectent toutes les instances de cet enfant. Mais pas les deux.
Si vous avez besoin de versions de style différent de la même chose…
Il suffit de dupliquer le ou ce dont vous avez besoin. La grande majorité des informations seront identiques et GZip mange un texte identique pour le petit-déjeuner.