如何清除移動SVG線留下的痕跡？

在一個Web應用程序中，我想用一條平滑線連接兩個HTML元素，並允許用戶移動任一元素。該行應該繼續加入這兩個要素。我已經創建了一個說明這個概念的jsFiddle here。如何清除移動SVG線留下的痕跡？

這裏是基本的代碼我使用用於繪製線，使用jQuery：

$(function ready() { 
    var $body = $("body") 
    var ns = "http://www.w3.org/2000/svg" 

    var $path = $(document.createElementNS(ns, "path")) 
    $path.attr({ 
     "d": "M 5 5 C 100 5, 100 195, 195 195" 
     , "stroke-width": 10 
     , "stroke-linecap": "round" 
     , stroke: "black" 
     , fill: "none" 
    }) 

    var svg = document.createElementNS(ns, 'svg') 
    var $svg = $(svg) 
     .attr("version", "1.1") 
     .attr("xmlns", "http://www.w3.org/2000/svg") 
     .attr("baseProfile", "tiny") 
     .attr("width", 200) 
     .attr("height", 200) 
     .append($path) 

    $body.append($svg) 
})

我使用所述可移動元件之間的SVG線，並且它離開每次重繪時間痕跡。（這使得非常漂亮的羽毛形狀的設計，但這不是我的目的）。如何在線路不再存在的地方刷新HTML頁面？

我知道如果我使用畫布來做這件事，我可以複製清晰的矩形，然後畫出線條。重繪線將包括三個步驟：

更換髒矩形
的廉潔形象複製這是關於
畫線

要繪製矩形的廉潔形象

我猜測，在使用SVG元素時，過程是非常不同的。我該怎麼辦？

來源

2015-05-13 James Newton

使用SVG，一條線是一個對象。不要創建一個新的行，移動現有的行。保存$path，並用新座標做$path.attr('d', ".....")。

來源

2015-05-13 04:57:14 Amadan

如何清除移動SVG線留下的痕跡？

回答

相關問題