manipulation svg en css

input checked

Sujet résolu

2 juillet 2020 à 15:50:44

Bonjour,

Je souhaiterais modifier une image SVG lorsqu'un input de type checkbox est checked.

Pour ce faire, j'ai mis le code SVG de l'image dans mon html puis grâce a l'instruction :

input[type="checkbox"]:checked ~ svg
{
   fill:red;
}

J'ai pu modifier la couleur du SVG Jusqu'ici tout va bien, jusqu'au moment où je ne veux modifier qu'une partie de ce SVG qui est composé de 6 rectangles dont les sont pour les 3 premier et pour les 3 autres :

<rect class="cls-1" width="2000" height="462" rx="231"/>

Mais lorsque je modifie ma ligne css (afin de ne modifier que les 3 premier rectangle) en :

input[type="checkbox"]:checked ~ .cls-1
{
   fill:red;
}

plus rien ne fonctionne.

Toute aide est la bienvenue, je suis présent si vous voulez plus de précision.

Merci d'avance.

Anonyme

2 juillet 2020 à 16:24:42

~ et un sélecteur de frères alors que cls-1 (il peut probablement être mieux nommé…) est probablement un neveu.

:checked ~ svg rect

devrait faire le taf.