javascript - 如何以编程方式在 SVG 中移动多边形？

Question

此处(SVG draggable using JQuery and Jquery-svg，接受的答案)是移动圆圈的拖放功能的实现。它基于改变可移动圆形对象的cx和cy属性。

如何拖放多边形？

如何使用任何其他没有 cx,cy 坐标的元素？

我应该重新计算所有对象点吗？

我希望有更简单的方法。我打算用JavaScript+jQuery

Answer 1

有一种无需重新计算点数的简单方法。您只需使用属性转换来转换形状。假设您的 svg 中只有任何形状(如果我想向您展示，我将使用形状元素)，并且您只能在事件 mousedown 时移动该形状，然后触发 mousemove , 并且当鼠标按钮被释放时这个 Action 结束。那么使用jQuery和svg标签作为选择器的过程如下:

$("svg").mousedown(function(e){
    /* Getting initial coordinates of pointer */
    var GetInitCoordx = e.clientX;
    var GetInitCoordy = e.clientY;

    /* When mouse is moved while down, then applies the transformation. */
    $(this).bind("mousemove.customName", function(e){
        $("svg").find("path").attr("transform", "translate("+String(e.clientX-GetInitCoordx)+","+String(e.clientY-GetInitCoordy)+")");
    });

    /* When mouse button is released, move event is unbind */
    $(this).mouseup(function(e){
        $(this).unbind("mousemove.customName");
    );}
});

基本思路是这样的。我已经使用这种方法设计了一个应用程序，它在 Chrome、IE9 和 Opera 中对我来说运行良好。无论如何，如果我在代码中犯了错误，你可以随时给我温暖，但我希望你得到的是我使用的方法非常容易实现。

另外，请记住，您可以为 svg 元素设置唯一的属性值，这样您就可以在使用 jQuery 选择器进行选择时进行识别。