javascript - 如何清除移动 SVG 线留下的痕迹？

Question

在网络应用程序中，我想用一条平滑的线连接两个 HTML 元素，并允许用户移动任一元素。这条线应该继续加入这两个元素。我创建了一个 jsFiddle here这说明了这个概念。

这是我使用 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 页面在该行不再存在的区域刷新？

我知道，如果我要使用 Canvas 执行此操作，我可以复制要绘制线条的干净矩形，然后绘制线条。重新绘制线条包括三个步骤:

• 替换脏矩形的干净图像
• 复制即将绘制的矩形的干净图像
• 画线

我猜想，在处理 SVG 元素时，过程是相当不同的。我该怎么办？

Answer 1

对于 SVG，一条线就是一个对象。不要创建新行，移动现有行。保存 $path，然后使用新坐标执行 $path.attr('d', ".....")。