18050 sujets

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

Pourquoi j'ai un fond de couleur parasite ?

Pages :
Administrateur
(reprise du message précédent)

parsimonhi a écrit :

Une version plus simple de svg pour faire une croix :

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


Je viens de la fabriquer avec un simple éditeur de texte.

Oui c'est clairement la meilleure approche sur le long terme.

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.
Modifié par Raphael (11 Jan 2024 - 14:14)
Modérateur
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". Smiley lol

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 ! Smiley cligne

Amicalement,
Modifié par parsimonhi (11 Jan 2024 - 14:49)
parsimonhi a écrit :
C'est pourquoi, une fois n'est pas coutume, je ne suis pas convaincu par ta proposition.

Il n'y a pas un truc comme quoi les variables CSS permettent de passer le Shadow DOM ? Si oui ça peut être utile pour utiliser un SVG sous forme de sprites avec <use>. Je ne sais plus si c'est le cas où non, je n'ai pas encore testé, moi non plus. Je n'en n'ai pas eu besoin pour l'instant car je colorie les SVG globalement pour l'instant. Mais du coup ça me donne envie d'essayer.

Édit : et bien je viens de tester et, si, les variables telle que proposées par Raphaël permettent de passer le Shadow DOM, et surtout permettent de cibler précisément un path. Car on ne pourra pas cibler ce même path à travers le Shadow DOM avec une ID s'il en comportait une.

J'avais lu tout cela quelque part mais je ne l'avais pas mis en pratique.
___
PS :
parsimonhi a écrit :
Le caractère "X" pour faire une croix n'est utilisé que par les gens de peu de foi.

Ah non ah non, pas d'accord : c'est la croix de Saint André l'apôtre ! (dixit : le catho de service Smiley cligne ).
Modifié par Olivier C (11 Jan 2024 - 21:12)
Modérateur
Bonjour,

Olivier C a écrit :
... et, si, les variables telle que proposées par Raphaël permettent de passer le Shadow DOM, et surtout permettent de cibler précisément un path. Car on ne pourra pas cibler ce même path à travers le Shadow DOM avec une ID s'il en comportait une.

Très intéressant ! Je vais creuser ça moi aussi.

Amicalement,
parsimonhi a écrit :
Très intéressant ! Je vais creuser ça moi aussi.

Je viens de faire un test ici : SVG Sprite using CSS Custom Properties.
Par contre je n'ai pas réussi à mettre des couleurs par défaut sans que le SVG ne prenne toujours le dessus...

Edit : oubliez cette bêtise que j'ai dite hier, ça fonctionne très bien. J'avais mis mes Styles APRÈS mes SVG. Forcément...
Modifié par Olivier C (12 Jan 2024 - 21:43)
Modérateur
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,
Il y a plusieurs solutions. Là, tout de suite, j'en vois deux :
- directement dans le <path>, comme l'a suggéré Raphaël, et ce que j'ai fais ici,
- soit dans une balise <style> au sein du SVG, avec un ciblage d'IDs que l'on spécifie pour les <path>, comme sur ce CodePen trouvé en glanant.

Pour ce dernier cas ça ressemble à ça :
<svg xmlns="http://www.w3.org/2000/svg" style="height: 0;">
  <symbol id="icon">
    <style>
      .shape-01 {
        fill: var(--color-01);
      }
      .shape-02 {
        fill: var(--color-02);
      }
      .shape-03 {
        fill: var(--color-03);
      }
    </style>
    <circle class="shape-01" cx="4.5" cy="4.5" r="4.5"/>
    <circle class="shape-02" cx="20.4" cy="4.5" r="4.5"/>
    <circle class="shape-03" cx="36.3" cy="4.5" r="4.5"/>
  </symbol>
</svg>

Modifié par Olivier C (11 Jan 2024 - 23:58)
Modérateur
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)
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à