javascript pour changer la couleur d'une forme svg

Question

Bonjour, existe-t-il un moyen d'utiliser le javascript, par exemple en utilisant des boutons pour changer la couleur d'une forme svg ? Si oui, quelqu'un peut-il me guider dans la bonne direction ? Merci.

Answer 1

Si vous avez un certain nombre de ces formes, alors regardez les bibliothèque d3 qui est conçu explicitement pour vous permettre de lier des données aux attributs svg. Une bonne explication de son fonctionnement se trouve dans l'article intitulé Trois petits cercles tutoriel.

Si vous voulez simplement modifier l'attribut d'une forme svg en cliquant sur un bouton, vous avez besoin d'un gestionnaire onclick pour le bouton :

function handleClick() {
    // code to modify svg here, e.g.:
    document.getElementById('svgShapeId').setAttribute('cx',150);
}

document.getElementById('buttonId').onclick = handleClick;

Answer 2

J'ai trouvé une solution simpliste. jsfiddle pour vous. En fait, vous modifierez le style des éléments SVG respectifs comme vous le feriez pour des éléments DOM normaux.

Answer 3

Voici un exemple d'utilisation de JS pour créer des éléments d'animation permettant de mettre en évidence des couleurs en fonction du passage de la souris :
http://phrogz.net/SVG/change-color-on-hover.svg

Voici un exemple d'un SVG qui change beaucoup de couleurs, et qui abrite des boutons de survol stupides :
http://phrogz.net/SVG/rgbhsv.svg

Voici un exemple qui montre SVG en XHTML, avec à la fois des widgets HTML natifs (un curseur HTML5) et des éléments SVG glissants (les poignées de chemin) :
http://phrogz.net/SVG/area_of_path.xhtml

En général :

1. Trouver des éléments
2. Attacher des gestionnaires d'événements
3. Dans les gestionnaires d'événements, ajustez les propriétés (soit en définissant les attributs XML, soit en utilisant la fonction SVG DOM )