Déplacement d'un objet SVG par survol

Pointez la boule (avec la souris ou avec le doigt) pour la déplacer vers la droite.

Nous allons employer dans notre animation JavaScript le mot "magique" this pour désigner l'objet SVG courant.
Et oui this peut désigner n'importe quel objet du DOM : objet HTML ou objet SVG.

Le code SVG de la page

<svg width="100%" height="auto" viewBox ="0 0 900 200" style ="background : lime ; box-shadow : 5px 5px 5px grey; "> <defs> <g id ="boule"> <circle cx ="20" cy ="20" r="15" fill ="gray"/> <circle cx ="15" cy ="15" r="15" fill ="red"/> </g> </defs> <use xlink:href="#boule" x="10" y ="50" onmouseover ="fdroite(this)" ontouchmove="fdroite(this)"/> </svg>

Notez l'emploi dans l'instruction use du gestionnaire d'événements.
L'événement ontouchmove est destiné aux écrans tactiles alors que l'événement onmouseover est destinés aux terminaux dotés d'une souris.
Notez l'emploi du mot this en guise d'argument dans l'appel de fonction. Faut-il rappeler que this désigne l'objet courant donc ici un objet SVG.

Le script

function fdroite(clone) { var x = clone.getAttribute("x"); x = parseInt(x); // récupération de l'emplacement actuel de la boule sur l'axe X x = x + 50 ; if (x >= 850) x =20; clone.setAttribute('x', x); // nouvel emplacement du rond sur l'axe des abcsisses. }

Aucune difficulté.
Rappel : la méthode getAttribute retourne une chaîne numérique. Aussi faut-il la convertir en entier. Mais ça vous le savez !
Retour menu