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

【问题标题】：How to move a polygon in SVG programmatically?如何以编程方式在 SVG 中移动多边形？
【发布时间】：2011-05-29 04:53:44
【问题描述】：

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

如何拖放多边形？

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

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

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

【问题讨论】：

标签： javascript jquery drag-and-drop svg

【解决方案1】：

有一种简单的方法可以做到这一点，而无需重新计算点。您只需要使用属性转换来转换形状。假设您的 svg 中只有任何形状（在我想向您展示的情况下，我将使用 shape 元素），并且您只能在事件 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 选择器进行选择时进行识别。

【讨论】：

谢谢。你能否解释一下为什么你需要'customName'作为'bind'方法的事件参数的一部分？
我使用事件 mousemove 作为命名空间。因此，我能够解除绑定的不是所有已设置的 mousemove 事件，而是仅解除我刚刚设置的事件，在这种情况下，是与形状移动相关的事件。
我喜欢这个。它也适用于资源管理器画布吗？
好吧，我没有尝试这样做。
好吧，如果你想同时移动它们，你可以将这 10000 个对象附加到“g”父级。然后，将转换应用于该元素。无论如何，密集访问 DOM 可以使任何浏览器成为幻灯片放映。