javascript - Javascript 在没有 JS 库的情况下移动 SVG 路径

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/