Déplacement d'un objet SVG par survol

Attention le fameux "drag & drop" de jQuery UI ne fonctionne pas pour des objets SVG.
Mais nous pouvons le simuler !

Pointez la boule (avec la souris ou avec le doigt) pour la déplacer par défaut vers la droite.
Appuyez sur une touche de direction du clavier pour la déplacer dans une autre direction.

Le code CSS, SVG et HTML de la page

... th {border:none;} ... <body> ... <table width ="40%" style ="border:none; margin : auto;"> <tr><th></th><th><button id ='haut' >&uarr;</button></th><th></th></tr> <tr><th><button id ='gauche'>&larr;</button></th><th></th> <th><button id ='droite'>&rarr;</button></th></tr> <tr><th></th><th><button id = 'bas'>&darr;</button></th><th></th></tr> </table> <svg width="100%" height="auto" viewBox ="0 0 800 400" 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 ="fmove(this)" ontouchmove ="fmove(this)"/> </svg> ...

HTML : le clavier tactile est un tableau avec quatre cellules non vides contenant chacune un bouton de commande légendé par une entité de caractère. Chaque bouton a un identifiant !

SVG : 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

var sens ="droite";
// définir le sens de déplacement de la boule
document.getElementById("gauche").onclick =function() {sens ="gauche"; }
document.getElementById("droite").onclick =function() {sens ="droite"; }
document.getElementById("haut").onclick =function() {sens ="haut"; }
document.getElementById("bas").onclick =function() {sens ="bas"; }
	
function fmove(clone) 
	{	
		// récupération de l'emplacement actuel de la boule
		var x = clone.getAttribute("x"); x = parseInt(x); 
		var y =clone.getAttribute("y") ; y =parseInt(y);
		
		// sens de déplacement de la boule
		if (sens =="gauche") x=x-30; 
		if (sens =="droite") x=x+30; 
		if (sens =="haut") y =y-20; 
		if (sens =="bas") y=y+20;
		
		// la boule ne doit pas sortir de la zone de dessin
		if(x<=0) x=0;
		if(x>=780) x =770;
		if(y<=0) y =0;
		if(y>=370) y =370;
	
		// nouvel emplacement de la boule
		clone.setAttribute('x', x);
		clone.setAttribute('y',y);
	}

Pour le script le "billard" fait 800 par 400 (dimensions du viewBox).

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