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

Question

这里(使用JQuery和Jquery-svg进行SVG拖动,接受了答案)是实现拖放功能来移动圆圈.它基于可移动圆对象的变化cx和cy属性.

如何拖放多边形？

我怎样才能使用任何其他没有的元素cx,cy坐标？

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

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

Answer 1

有一种简单的方法可以做到这一点，而无需重新计算点。您只需使用属性变换来平移形状即可。假设您的 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 选择器进行选择时进行识别。