Cliquez sur un texte et bouton gauche appuyé, déplacez la souris

Source du fichier SVG

<svg width="500" height="400" onload="init(evt)">
<script><![CDATA[
var appui=false,cible="",xt1=0,yt1=0,objet="",svgdoc="",num=0;

function init(evt)
{svgdoc=evt.getTarget().getOwnerDocument();
for (i=1;i<=2;i++)
{obj=svgdoc.getElementById("text"+i);contour=obj.getBBox();
trace="M"+contour.x+" "+contour.y+" l"+contour.width+" 0 0 "+contour.height+" -"+contour.width+" 0z";
obj=svgdoc.getElementById("boite"+i);
obj.setAttribute("d",trace)}}

function bouger(evt)
{xm=evt.getClientX();ym=evt.getClientY();
if ((xm<=5)||(xm>=495)||(ym<=5)||(ym>=395)) {appui=false}
else
{if ((cible.indexOf("boite")>=0)&&(appui==true))
{objet=svgdoc.getElementById("text"+num);
var xt2=parseInt(objet.getAttribute("x")),yt2=parseInt(objet.getAttribute("y"));
var depx=xt2+xm-xt1,depy=yt2+ym-yt1;
objet.setAttribute("x",depx);objet.setAttribute("y",depy);
contour=objet.getBBox();
target=svgdoc.getElementById(cible);
trace="M"+contour.x+" "+contour.y+" l"+contour.width+" 0 0 "+contour.height+" -"+contour.width+" 0z";
target.setAttribute("d",trace);
xt1=xm;yt1=ym}}}

function lacher(evt)
{appui=false}

function cliquer(evt)
{cible=evt.getTarget().getAttribute("id");
if (cible.indexOf("boite")>=0)
{appui=true;num=parseInt(cible.substring(5,cible.length));
xt1=parseInt(evt.getClientX());yt1=parseInt(evt.getClientY())}}

]]></script>
<g onmouseup="lacher(evt)">
<rect x="0" y="0" width="500" height="400" fill="white"/>
<g onmousemove="bouger(evt)" onmousedown="cliquer(evt)">
<text id="text1" x="20" y="50" fill="red" font-size="25">SVG</text>
<path id="boite1" d="M0 0" opacity="0"/>
<text id="text2" x="20" y="200" fill="black" font-size="18">Scalable Vector Graphics</text>
<path id="boite2" d="M0 0" opacity="0"/></g>
</g>
</svg>