Déplacer un objet SVG dans son canevas via le clavier

Utilisez les touches de direction du clavier pour déplacer la voiture.
Donc cette page ne fonctionne pas avec une tablette ou un smartphone.

Le code SVG

<svg width="100%" height="auto" viewBox ="0 0 900 150" style ="background : lime ; box-shadow : 5px 5px 5px grey; "> <defs> <g id = 'voiture_jaune'> <path d= 'M 0,20 v-10 h10 v-10 h 20 v 10 h 10 v 10 z' fill = 'yellow' /> <rect x = '14' y ='2' width ='14' height ='8' fill = 'gray' /> <circle cx = '10' cy='20' r = '5' fill = 'silver' /> <circle cx = '30' cy='20' r = '5' fill = 'silver' /> </g> </defs> <use xlink:href="#voiture_jaune" x="100" y="50" id ='jaune' /> </svg>

Le canevas contient un clone du modèle voiture_jaune ; le clone est identifié jaune.

Le script jQuery

var x; var y; var X= $("svg").attr("width"); var Y= $("svg").attr("height"); $(window).keydown(function(e) { if(e.which ==37) gauche(); if(e.which ==39) droite(); if(e.which ==38) haut(); if(e.which ==40) bas(); }); function droite() {x =$("#jaune").attr("x");x =parseInt(x); x = x+10 ;if(x >=X) x=X-40; $("#jaune").attr("x",x);} function gauche() {x =$("#jaune").attr("x"); x=parseInt(x); x = x-10 ;if(x <0) x=0; $("#jaune").attr("x",x);} function bas() {y =$("#jaune").attr("y");y = parseInt(y); y = y+10 ;if(y >=Y) y=Y-20; $("#jaune").attr("y",y);} function haut() {y =$("#jaune").attr("y");y = parseInt(y); y = y-10 ;if(y <0) y=0; $("#jaune").attr("y",y);}

Attention la méthode attr() retourne toujours une chaîne. Donc avant toute tentative d'incrémentation il faut convertir la chaîne en un entier avec la fonction parseInt().
La propriété jQuery which appliquée à l'objet "event" (ici désigné par la lettre e) retourne le code ASCII de la touche enfoncée.
Retour menu