Cliquez sur un objet 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="" , xd2=0 , yd2=0 , xd1=0 , yd1=0 , coeffs = new Array();

function move(evt)
{
        if (!appui)
                return
        var xm = evt.clientX;
        var ym = evt.clientY;
        if ((xm<=5)||(xm>=495)||(ym<=5)||(ym>=395))
        {
                appui=false;
                return;
        }
        if ((cible != "rectangle")&&(cible != "cercle"))
                return
        svgdoc = evt.target.ownerDocument;
        coeffs[4] = xm + xd1 - xd2;
        coeffs[5] = ym + yd1 - yd2;
        if (cible=="rectangle")
        {
                if (coeffs[4] < 0)
                        coeffs[4] = 0
                if (coeffs[4] > 400)
                        coeffs[4] = 400
                if (coeffs[5] < 0)
                        coeffs[5] = 0
                if (coeffs[5] > 350)
                        coeffs[5] = 350
        };
        if (cible=="cercle")
        {
                if (coeffs[4] < 50)
                        coeffs[4] = 50
                if (coeffs[4] > 450)
                        coeffs[4] = 450
                if (coeffs[5] < 50)
                        coeffs[5] = 50
                if (coeffs[5] > 350)
                        coeffs[5] = 350
        }
        var chaine = "matrix(" + coeffs.join(" ") + ")";
        svgdoc.getElementById(cible).setAttributeNS(null , "transform" , chaine)
}

function cliquer(evt)
{
        cible=evt.target.getAttributeNS(null , "id");
        if ((cible=="rectangle")||(cible=="cercle"))
        {
                appui=true;
                xd2 = evt.clientX;
                yd2 = evt.clientY;
                var transfo = evt.target.getAttributeNS(null , "transform")
                transfo = transfo.substring(7 , transfo.length - 1)
// Firefox return , as separator in transform attribute
                if (transfo.indexOf(",") > 0)
                        coeffs = transfo.split(",")
                else
                        coeffs = transfo.split(" ")
                xd1 = parseInt(coeffs[4]);
                yd1 = parseInt(coeffs[5]);
        }
}

]]></script>
<g onmousemove="move(evt)" onmousedown="cliquer(evt)" onmouseup="appui = false">
<rect x="0" y="0" width="500" height="400" stroke="#0E0E0E" fill="#EEEEEE"/>
<rect id="rectangle" x="0" y="0" width="100" height="50" transform="matrix(1 0 0 1 50 50)" 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)" stroke-width="1" stroke="#0E0E0E" fill="green"/>
</g>
</svg>