Pourquoi j'ai un fond de couleur parasite ?

Bonjour,

Raphael a écrit :

Si je peux me permettre, je t'invite à ne pas mettre de couleur "en dur" dans ton élément, mais plutôt de remplacer le

stroke="#000"

en

stroke="currentColor"

voire mieux

stroke="var(--text-color)"

que tu pourras aisément modifier à la volée... à condition que ton élément soit inséré inline dans le HTML évidemment.

Arf, j'allais écrire "à condition que ton élément soit inséré inline dans le HTML".

Oui, bien entendu, si le <svg> est inline, on peut le styler avec le css de la page.

Ceci étant, on notera que les attributs en svg ne sont pas prioritaires sur le css. Ce point est négligé par beaucoup.

C'est pourquoi, une fois n'est pas coutume, je ne suis pas convaincu par ta proposition.

Pour ma part (et je tiens à préciser que je "bouffe" du svg à longueur de journée), je mets toujours dans mes svg une couleur "en dur" par défaut (pour le cas où la page est affichée sans css, ou si je veux utiliser ce svg comme source d'une balise <img>, ou pour tout autre usage comme les importer dans d'autres documents), et que ce n'est qu'ensuite que je change éventuellement la couleur par défaut que j'ai mis dans le svg via le css de la page (si ce svg est inline bien entendu).

Dans notre cas, ça donne ça :

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000">
	<path stroke-linecap="round" d="M4-4L-4 4M-4-4L4 4">
</svg>

... et dans le css ...

svg {stroke:#9885be;}

On a ainsi me semble-t-il des svg bien plus portables que si on y met un

stroke="var(--text-color)"

qui oblige ensuite à spécifier --text-color quelque part (et qui oblige de se rappeler qu'il y a ce genre de code dans notre svg).

On notera enfin que si on doit insérer ce svg dans un document (via un éditeur de document) pour par exemple faire une documentation, et qu'il y a genre plusieurs dizaines de couleurs spécifiées ici et là dans le svg, bah, on est mal si elles le sont via des --text-color !

Amicalement,
Modifié par parsimonhi (11 Jan 2024 - 14:49)

Bonjour,

Olivier C a écrit :
Par contre je n'ai pas réussi à mettre des couleurs par défaut sans que le SVG ne prenne toujours le dessus...

Tu la spécifies où et comment, la couleur par défaut ?

Amicalement,

Bonjour,

css (de la page html) :

svg:has(symbol)
{
	display:none;
}
svg:last-of-type use {
  --color-01: #0ff;
  --color-02: #f0f;
  --color-03: #ff0;
}

svg (inclus dans la page html)

<svg>
  <symbol id="icon">
    <circle fill="var(--color-01,#f00)" cx="4.5" cy="4.5" r="4.5"/>
    <circle fill="var(--color-02,#0f0)" cx="20.4" cy="4.5" r="4.5"/>
    <circle fill="var(--color-03,#00f)" cx="36.3" cy="4.5" r="4.5"/>
  </symbol>
</svg>
<svg viewBox="0 0 40.8 9">
  <use href="#icon"></use>
</svg>
<svg viewBox="0 0 40.8 9">
  <use href="#icon"></use>
</svg>

jsfiddle: https://jsfiddle.net/parsimonhi/4762kb89/

Les cercles de la première ligne ont les couleurs par défaut définies dans la balise <symbol>. Les cercles de la deuxième ligne ont les couleurs définies dans le css de la page.

Le <svg> contenant la balise <symbol> peut éventuellement être dans un fichier à part mais dans ce cas, il faut lui rajouter l'attribut xmlns="http://www.w3.org/2000/svg" (alors que s'il est dans la page html, on peut s'en passer).

Amicalement,
Modifié par parsimonhi (12 Jan 2024 - 11:00)

Mais, mais, mais : sur mes tests je n'aurais pas mis mes styles APRÈS mon SVG par hasard ? ... Je n'ai pas fais ça quand même... Si !

Ah là là, quelle tête en l'air je suis ! C'est sûr que ça ne risquait pas de marcher...

Oubliez ce que j'ai dis plus haut : les variables définies par défaut fonctionnent très bien, y compris lorsqu'elles sont définies au-delà du Shadow DOM. J'ai mis mon exemple à jour.

Désolé pour le laps de temps entre hier et aujourd'hui, j'y ai pensé ce matin mais je n'avais pas le temps de répondre sur le forum.

Bien amicalement.
Modifié par Olivier C (12 Jan 2024 - 20:10)