Javascript 如何通过移动SVG线清除留下的痕迹？

在web应用程序中，我希望用平滑的线条连接两个HTML元素，并允许用户移动任意一个元素。这条线应该继续连接这两个元素。我已经创建了一个示例来说明这个概念

下面是我使用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页面在不再显示行的区域中刷新

我知道如果我使用画布来做这件事，我可以复制干净的矩形，在那里画线，然后画线。重新绘制线将包括三个步骤：

• 替换脏rect的干净映像
• 复制即将绘制的矩形的干净图像
• 划清界限

---

我猜想，在使用SVG元素时，过程会有很大不同。我该怎么办？

对于SVG，线是一个对象。不要创建新行，移动现有行。保存

$path

，并使用新坐标执行

$path.attr（'d'，“…”）