Cliquez sur un objet et bouton gauche appuyé, déplacez la souris
Source du fichier SVG
<svg width="500" height="400"> <script><![CDATA[ var appui=false,cible="",xd2=0,yd2=0,xd1=0,yd1=0,objet=""; function bouger(evt) {xm=evt.getClientX();ym=evt.getClientY(); if ((xm<=5)||(xm>=495)||(ym<=5)||(ym>=395)) {appui=false} else {if (((cible=="rectangle")||(cible=="cercle"))&&(appui==true)) {svgdoc=evt.getTarget().getOwnerDocument(); tran=objet.getAttribute("transform"); j=1;for (i=1;i<5;i++) {posi=tran.indexOf(" ",j+1);j=posi}; tran=tran.substring(0,posi); depx=xm+xd1-xd2;depy=ym+yd1-yd2; if (cible=="rectangle") {if (depx<0) {depx=0};if (depx>400) {depx=400};if (depy<0) {depy=0};if (depy>350) {depy=350}}; if (cible=="cercle") {if (depx<50) {depx=50};if (depx>450) {depx=450};if (depy<50) {depy=50};if (depy>350) {depy=350}}; poly=tran+" "+depx+" "+depy+")"; objet=svgdoc.getElementById(cible); objet.setAttribute("transform",poly)}}} function lacher(evt) {appui=false} function cliquer(evt) {cible=evt.getTarget().getAttribute("id");svgdoc=evt.getTarget().getOwnerDocument(); if ((cible=="rectangle")||(cible=="cercle")) {appui=true; xm=evt.getClientX();ym=evt.getClientY(); objet=svgdoc.getElementById(cible); tran=objet.getAttribute("transform");j=1; for (i=1;i<5;i++) {posi=tran.indexOf(" ",j+1);j=posi} posi2=tran.lastIndexOf(" "); tranx=tran.substring(posi,posi2);xd1=parseInt(tranx,10); longue=tran.toString().length-1;posi2=posi2+1; trany=tran.substring(posi2,longue);yd1=parseInt(trany,10); xd2=xm;yd2=ym}} ]]></script> <g onmousemove="bouger(evt)" onmousedown="cliquer(evt)" onmouseup="lacher(evt)"> <rect x="0" y="0" width="500" height="400" style="stroke-width:1; stroke:#0E0E0E; fill:#EEEEEE"/> <rect id="rectangle" x="0" y="0" width="100" height="50" transform="matrix(1 0 0 1 50 50)" style="stroke-width:1; stroke:#0E0E0E; fill:red"/> <ellipse id="cercle" cx="0" cy="0" rx="50" ry="50" transform="matrix(1 0 0 1 300 200)" style="stroke-width:1; stroke:#0E0E0E; fill:green"/> </g> </svg>