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

Source du fichier SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="400">
<script><![CDATA[
var appui=false,cible="",xt1=0,yt1=0,objet="",svgdoc="",num=0;

function bouger(evt)
{
        if ((!appui)||(cible.indexOf("boite") < 0))
                return
        var xm = evt.clientX;
        var ym = evt.clientY;
        var objet = svgdoc.getElementById("text" + num.toString());
        var xt2 = parseInt(objet.getAttributeNS(null , "x"))
        var yt2 = parseInt(objet.getAttributeNS(null , "y"));
        var depx = xt2 + xm - xt1
        var depy = yt2 + ym - yt1;
        var boite = svgdoc.getElementById("boite" + num.toString())
        if (depx < 0 )
                depx = 0
        if (depy < parseFloat(boite.getAttributeNS(null , "height")) )
                depy = parseFloat(boite.getAttributeNS(null , "height"))
        if (depy > 400 )
                depy = 400
        if (depx + parseFloat(boite.getAttributeNS(null , "width")) > 500)
                depx = 500 - parseFloat(boite.getAttributeNS(null , "width"))
        objet.setAttributeNS(null , "x" , depx);
        objet.setAttributeNS(null , "y" , depy);
        boite.setAttributeNS(null , "x" , depx);
        boite.setAttributeNS(null , "y" , (depy - parseFloat(boite.getAttributeNS(null , "height"))).toString());
        xt1 = xm
        yt1 = ym
}


function cliquer(evt)
{
        svgdoc = evt.target.ownerDocument;
        cible = evt.target.getAttribute("id");
        if ((cible.indexOf("text") < 0)&&(cible.indexOf("boite") < 0))
                return
        if (cible.indexOf("text") >= 0)
        {
                num = parseInt(cible.substring(4,cible.length));
                cible = "boite" + num.toString()
                for (var i = 1 ; i < 3 ; i++)
                {
                        var contour = svgdoc.getElementById("text" + i.toString()).getBBox();
                        obj = svgdoc.getElementById("boite" + i.toString());
                        obj.setAttributeNS(null , "x" , contour.x)
                        obj.setAttributeNS(null , "y" , contour.y)
                        obj.setAttributeNS(null , "width" , contour.width)
                        obj.setAttributeNS(null , "height" , contour.height)
                        svgdoc.getElementById("text" + i.toString()).setAttributeNS(null , "pointer-events" , "none")
                }
        }
        else
                num = parseInt(cible.substring(5,cible.length));
        appui = true
        xt1 = parseInt(evt.clientX);
        yt1 = parseInt(evt.clientY);
}

]]></script>
<g onmousemove="bouger(evt)" onmousedown="cliquer(evt)" onmouseup="appui = false">
<rect x="0" y="0" width="500" height="400" fill="white"/>
<text id="text1" x="20" y="50" fill="red" font-size="25" font-family="Arial">SVG</text>
<rect id="boite1" x="0" y="0" width="0" height="0" fill="none" pointer-events="visible" cursor="move"/>
<text id="text2" x="20" y="200" fill="black" font-size="18" font-family="Arial">Scalable Vector Graphics</text>
<rect id="boite2" x="0" y="0" width="0" height="0" fill="none" pointer-events="visible" cursor="move"/>
</g>
</svg>