javascript - JSライブラリなしでSVGパスを移動するJavascript

Question

SVG キャンバス上でパスをドラッグしたい。要件は、JS ライブラリを使用しないことです。どんな例でも私を助けます。

私は raphael.js が非常に簡単であることを知っています。

ありがとう。

Answer 1

純粋な JS の例を次に示します。

<svg id='mysvg' height="800" width="800">
    <path id='mypath' fill="#4444ff" stroke="#000000" d="M100,300L400,300L100,0Z" transform=""></path>
</svg>

JS:

el=document.getElementById("mypath");
sv=document.getElementById("mysvg");
flag=false; //to check if the mouse is currently down?

sv.onmousedown=function(e){
    flag=true;
    x1=e.clientX;
    y1=e.clientY;
    var t=el.getAttribute('transform');
    if(t){
      var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(t);
      var firstX = parts[1], firstY = parts[2];
      x1=x1-firstX*1;
      y1=y1-firstY*1;
    }
    /* x1 and y1 now contain the previous position*/
};
sv.onmousemove=function(e){
    if(flag){
        x=e.clientX;
        y=e.clientY;
        t="translate("+(x-x1)+","+(y-y1)+")"
        el.setAttribute('transform',t);
    }
};
sv.onmouseup=function(){flag=false};

フィドル: http://jsfiddle.net/gF8Wd/2/