28208 sujets

CSS et mise en forme, CSS3

Styler contour dessin SVG

Pages :
Bonjour,

Je ne comprends pas pourquoi je n'arrive pas à changer la couleur du contour de ce dessin .svg.

Vous pouvez le voir dans ce codepen quand la fenêtre fait moins de 1200 px de large.

Code de l'image :

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.52 43.07">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 0px;
      }

      .cls-2 {
        fill: none;
        stroke: #000;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2.3px;
      }
    </style>
  </defs>
  <path id="Tracé_50" data-name="Tracé 50" class="cls-2" d="m11.08,12.95h32.29"/>
  <rect class="cls-1" x="32.82" y="30.96" width="2.3" height="5.32"/>
  <path class="cls-1" d="m39.29,32.1H13.4c-.55,0-1.02-.39-1.13-.92L6.49,2.3H1.15c-.64,0-1.15-.51-1.15-1.15S.51,0,1.15,0h6.28c.55,0,1.02.39,1.13.92l5.79,28.87h24.02l3.88-17.1c.14-.62.76-1.01,1.38-.87.62.14,1.01.76.87,1.38l-4.08,18c-.12.52-.58.9-1.12.9Z"/>
  <rect class="cls-1" x="16.95" y="30.96" width="2.3" height="5.76"/>
  <path class="cls-1" d="m19.25,34.7c-.33-.09-.68-.14-1.04-.14-.44,0-.86.07-1.26.19-1.73.54-2.99,2.16-2.99,4.06,0,2.35,1.91,4.26,4.25,4.26s4.25-1.91,4.25-4.26c0-1.98-1.37-3.65-3.21-4.11Zm-1.04,6.06c-1.08,0-1.95-.87-1.95-1.95s.87-1.94,1.95-1.94,1.95.87,1.95,1.94-.88,1.95-1.95,1.95Z"/>
  <path class="cls-1" d="m35.12,34.67c-.29-.07-.6-.11-.92-.11-.48,0-.95.08-1.38.24-1.67.57-2.87,2.15-2.87,4.01,0,2.35,1.91,4.26,4.25,4.26s4.25-1.91,4.25-4.26c0-2.02-1.43-3.72-3.33-4.14Zm-.92,6.09c-1.07,0-1.95-.87-1.95-1.95s.88-1.94,1.95-1.94,1.95.87,1.95,1.94-.87,1.95-1.95,1.95Z"/>
</svg>


Merci d'avance pour votre aide.
Administrateur
Hello,

Selon le type de tracé (path ou rect), il faut jouer sur la propriété stroke *ou* fill.
Donc si tu appliques les deux directement dans l'élément SVG ça passe : 


<svg id="Calque_1" data-name="Calque 1" 
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.52 43.07" 
fill="hotpink" stroke="hotpink">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 0px;
      }
      .cls-2 {
        stroke-width: 2.3px;
      }
    </style>
  </defs>
bla bla bla
</svg>


https://codepen.io/raphaelgoetter/pen/dPyLNdV?editors=1100

Attention : si ton SVG reste externe ("<img src="https://botega.fr/Panier.svg"...") alors les possibilités de modifier les styles sont beaucoup moins évidentes : il faudra certainement donner une valeur en dur dans le fichier, elle ne sera pas facilement modifiable à la volée (au survol ou en darkmode par exemple... même si ça reste possible)
Modifié par Raphael (06 Apr 2025 - 19:35)
Bonjour Raphaël,

Je veux modifier par la feuille CSS avec effectivement :hover et le mode DARK, donc 4 valeurs possibles pour les couleurs du contour.

Je préfère une image externe car je peux avoir jusqu'à 100 fois cette image sur la même page donc le SVG dans le code html devient un peu lourd.

J'utilise parfois cette image dans le code html avec le code suivant :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" fill="none" stroke="black" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">
<path d="M1.2,2.2H7.6L13.5 32H39.3L43.3 14H10M18,32V36A3.5,3.5 0 0 1 18,43A3.5,3.5 0 0 1 18,36ZM34,32V36A3.5,3.5 0 0 1 34,43A3.5,3.5 0 0 1 34,36Z" />
</svg>


Dans ce cas je n'ai aucun problème pour styler le contour comme je veux.

#panier_mob > svg {width: 42px; height: 42px; stroke: var(--gris-fonce)}
#panier_mob > svg:hover {stroke: var(--noir)}
@media (prefers-color-scheme: dark)
{
#panier_mob > svg {stroke: var(--noir)}
#panier_mob > svg:hover {stroke: var(--super-couleur)}
}


Accessoirement si je fais un copier-coller du code svg pour créer une image externe cette image ne s'affiche pas (comme si elle n'existait pas).
Administrateur
boteha_2 a écrit :

Je préfère une image externe car je peux avoir jusqu'à 100 fois cette image sur la même page donc le SVG dans le code html devient un peu lourd.


Je comprends et j'ai plusieurs pistes et réponses...

1. Si ton SVG est externe (<img src="">) alors tu ne peux pas le modifier via CSS de manière générale, car CSS n'a pas d'emprise sur des éléments qui ne font pas partie de la page.

MAIS il y a tout de même deux astuces qui peuvent fonctionner :
- Appliquer des styles directement dans le fichier SVG via "<style="">" (tu pourras y appliquer tes styles au survol, au darkmode, etc.)... par contre les valeurs devront être en dur car ton fichier SVG n'a pas accès au variables CSS de ton projet.
- Utiliser un masque CSS, ce qui impose d'autres contraintes.

Ces deux astuces sont évoquées dans la partie "Darkmode" de nos guidelines (voir "Dark Mode et SVG inline" + "Dark Mode et SVG externe (on peut toucher au SVG)" + "Dark Mode et SVG externe (on ne peut pas toucher au SVG)") : https://github.com/alsacreations/kiwipedia/blob/main/guidelines/css.md#dark-mode

2. Si ton SVG est inline (inséré directement dans le HTML), alors tu peux tout manipuler en CSS.

Il y a une fonctionnalité très pratique en SVG pour cloner autant de fois que tu veux un tracé SVG juste en y faisant référence et sans avoir à répéter 100x le SVG global : c'est "use". Je te conseille de te renseigner sur le sujet : https://la-cascade.io/articles/utiliser-svg-use
Modifié par Raphael (06 Apr 2025 - 20:37)
Merci pour toutes ces pistes.

Styler l'image externe semble très facile.

Je vais aussi regarder use.

Je reviens au plus vite.
Merci pour l'exemple de use.

Je ne comprends pas à quoi sert l'élément <symbol> mais le résultat est là et il semble facile à copier.
Raphael a écrit :
Symbol est un tracé SVG qui est masqué et qui ne sert qu'à être cloné via use.


C'est noté.

Encore merci de ton suivi.
Il semble que la pseudo-classe :hover ne puisse pas être utilisée à l'intérieur du code de l'image SVG.

Je n'y suis pas arrivé et cette discussion chez stackoverflow donne des explications.

Reste la solution du code SVG dans le code HTML avec USE.
Modifié par boteha_2 (06 Apr 2025 - 22:14)
Administrateur
Si tu patientes un peu, un guide détaillé devrait voir le jour bientôt sur Alsacréations.

Tu m'as motivé à plancher dessus Smiley cligne
Bonjour,

Raphael a écrit :
Si tu patientes un peu, un guide détaillé devrait voir le jour bientôt sur Alsacréations.


Génial, tes tutos sont des références.

Je peux déjà bien avancer avec toutes les informations de cette discussion.

Je me demande si USE passe au validateur du W3C,.. pas sûr quand on sait qu'ils ne connaissent pas subgrid qui provoque une erreur.
Bonjour Raphaël,

Peux-tu jeter un œil au codepen ?

Afin de vérifier que le svg est correct je l'affiche en bas de page dans un <p>, pas de souci.

Par contre le même svg en haut de page supposé être la source de USE occupe l'espace sans s'afficher et sans être appelé par USE.

Je suppose que c'est là qu'il y a erreur :

<svg>
<symbol id="pan" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" fill="none" stroke-width="2.3">
<path d="M1.2,2.2H7.6L13.5 32H39.3L43.3 14H10M18,32V36A3.5,3.5 0 0 1 18,43A3.5,3.5 0 0 1 18,36ZM34,32V36A3.5,3.5 0 0 1 34,43A3.5,3.5 0 0 1 34,36Z" />
</symbol>
</svg>

Modifié par boteha_2 (08 Apr 2025 - 19:59)
Administrateur
Il faut un style="display:none" dans ton SVG de référence.

Ou alors, côté CSS : 
svg:has(symbol) {display: none;}
Raphael a écrit :
Ou alors, côté CSS :
svg:has(symbol) {display: none;}


C'est fait, voir le codepen.

Par contre je n'arrive pas à voir les svg demandés par USE.
Administrateur
"Use" fonctionne au sein d'un SVG, tu ne peux pas l'utiliser directement dans HTML.

<svg><use href="#pan" /></svg>
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à