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/

Javascript移动没有JS库的SVG路径

1 个答案: