如何以編程方式移動 SVG 中的多邊形？

Question

這里（ SVG 可使用 JQuery 和 Jquery-svg 拖動，接受的答案）是實現拖放功能以移動圓圈。 它基於改變可移動圓object的cx和cy屬性。

如何拖放多邊形？

如何使用沒有cx 、 cy坐標的任何其他元素？

我應該重新計算所有 object 點嗎？

我希望有一個更簡單的方法。 我打算使用 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 選擇器進行選擇時進行識別。