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 ?