如何清除移动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线留下的痕迹？

回答

相关问题