Styler contour dessin SVG

(reprise du message précédent)

"Use" fonctionne au sein d'un SVG, tu ne peux pas l'utiliser directement dans HTML.

<svg><use href="#pan" /></svg>

Hello,

boteha_2 a écrit :
Je l'ai mis le plus bas possible.

Figure-toi que tu peux même le garder en fichier externe (j'ai appris ça en rédigeant le tutoriel qui va sortir aujourd'hui).

boteha_2 a écrit :
J'ai un input type="radio" non associé à un label for.
Cet input est devenu invisible et recouvert par l'image du panier.
Un javascript le transforme en bouton de soumission.

Qu'en pensez-vous ?

Alors comme ça j'ai du mal à me représenter. Mais de manière générale quand une icône est placée dans un bouton, voilà la bonne pratique :
- l'icône est décorative (aria-hidden=true sur le SVG et surtout pas de role=img)
- c'est le bouton qui transmet l'information d'action (texte dans un span masqué sauf pour les lecteurs d'écran, OU aria-label sur ce bouton... mais pas sur le SVG)

EDIT : j'avais raté cette partie "J'ai un input type="radio" non associé à un label for."
Il te faut absolument un label associé à ton input, au pire tu le masques sauf pour les lecteurs d'écran. Du coup je comprends encore moins la transformation en bouton submit.

EDIT : l'article est publié : https://www.alsacreations.com/tuto/lire/1944-appliquer-des-styles-css-a-svg.html
Modifié par Raphael (10 Apr 2025 - 12:01)

Bonjour Raphaël,

J'ai lu ton tuto, comme toujours très clair et complet.

Raphael a écrit :
j'avais raté cette partie "J'ai un input type="radio" non associé à un label for."
Il te faut absolument un label associé à ton input, au pire tu le masques sauf pour les lecteurs d'écran. Du coup je comprends encore moins la transformation en bouton submit.

Mon projet est tordu.
Un produit existe en plusieurs versions.
Comme on le voit sur le codepen, en version grand écran (+ de 1200 px dans le codepen) la version est sélectionnable par un input type= radio et il devrait y avoir sous la liste un bouton "Ajouter au panier".
Sélection + Bouton -> Page panier où tu peux fixer la quantité
Sur petit écran, quand tu as beaucoup de versions chercher le bouton "Ajouter au panier" sous la liste n'est pas forcément évident.
En version mobile je me demande si une autre approche n'est pas plus ergonomique. La case à cocher est remplacée par l'image d'un panier, cliquer sur le panier suffit à ajouter la version au panier.
Clic sur icône panier -> Page panier où tu peux fixer la quantité.
Un javascript transforme l'input en bouton de soumission.

Je poursuis les essais et ma religion n'est pas faite.
Je vais peut-être rester sur la liste avec input tyoe="radio" quelle que soit la taille de l'écran.

Autrement la colonne caractéristiques pourrait être utilisée comme label pour l'input, il me semble que j'avais trouvé un inconvénient mais j'ai oublié lequel.

Bonjour,

Le modèle <svg><symbol ....> ... </symbol></svg> peut être placé en fichier externe.

Dans ce cas je suppose que le navigateur le met en cache, donc il s'agit de la méthode qui bouffe le moins de bande passante.

Confirmes-tu ?

Bonjour,

Comprenez-vous pourquoi ce SVG ne veut pas s'afficher :

<svg>
<use href="https://botega.fr/pan_form.svg" />
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<svg>
<symbol 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>

Et la feuille de style du codepen.

Bonjour,

Je suis désolé d'insister mais je ne comprends pas pourquoi dans le codepen le même fichier SVG associé au même CSS externe fonctionne avec USE en inline et pas en externe.

code SVG Inline : à voir en haut dans le codepen

externe :

<?xml version="1.0" encoding="UTF-8"?>
<svg>
<symbol id="panier" 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>

Appel fichier externe (à la fin du codepen) :

<svg>
<use href="https://monsite.com/pan_form.svg#panier" />
</svg>

Bonjour/bonsoir:

Comme ton SVG est sur un site distant de la page que tu affiches, il n'est pas surprenant que cette ressources ne soit pas chargée.

Dans les outils du navigateur, on y trouve ce message :

a écrit :
Erreur de sécurité : le contenu situé à https://cdpn.io/cpe/boomboom/index.html?key=index.html-1eff194b-0942-e130-51c0-c2477e78925d ne peut pas charger de données à partir de https://botega.fr/pan_form.svg.

Bonjour gcyrillus,

D'accord, c'est compris, merci pour ton suivi.

J'ai fait l'essai sans le codepen et effectivement le SVG externe appelé par USE s'affiche.

Pratique ce USE, sauf erreur il faut se référer à un id en inline comme en externe.

<svg>
<use href="https://monsite.com/pan_form.svg#panier" />
</svg>

#xxx est indispensable.

Reste à méditer sur le rôle de l'élément <symbol>, je pourrai bientôt cocher Résolu.