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

Posted 2021-04-20

这里（SVG draggable using JQuery and Jquery-svg，接受的答案）是实现拖放功能来移动圈子。它基于改变可移动圆对象的cx和cy属性。

如何拖放多边形？

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

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

我希望有一种更简单的方法。我打算使用javascript + jQuery

答案

有一种简单的方法可以在不重新计算点的情况下完成。您只需使用属性转换来转换形状。假设你在你的svg中有任何形状（在我想要向你展示的情况下，我将使用一个形状元素），并且你只能在事件mousedown时移动该形状，然后触发mousemove ，以及释放鼠标按钮时此操作结束。然后使用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选择器进行选择时进行识别。