更快的SVG路径操作

Question

所以我想用SVG做一个绘图工具，我用了一个相当幼稚的方法来改变我的路径的d属性：

$("div#drawarea").bind("mousemove", function(ev) {

  ev.preventDefault();

  ev.stopPropagation();

  var pX= (ev.pageX - this.offsetLeft);

  var pY= (ev.pageY - this.offsetTop);

  $path.attr("d", $path.attr("d") + " L" +pX+ "," + pY); //using jquery-svg here to change the d attribute

});

正如您所看到的，我在mousemove函数上执行此操作。代码可以工作，但当鼠标快速移动时，它变得没有响应，创建了许多直线，而我实际上希望它是流畅的直线。我认为这是因为我在mousemove事件上进行了大量的字符串连接(当长时间按住鼠标单击时，路径上的d属性可能会变得非常大，实际上是数千个字符)。

我想知道是否有任何本机方法可以在路径的末尾添加新的值，而不是直接操作d属性。我检查了jquery-svg源代码，该库似乎也在内部使用了朴素的字符串连接模式，因此使用它的方法不会有任何好处。

我还想知道是不是这样，或者浏览器只是限制了mousemove事件的数量(每X毫秒一次？)这是可以触发的，因此没有性能优化可以改善这一点。

Answer 1

使用SVG pathseg DOM方法。您必须编写更复杂的代码，但浏览器不必重新解析整个path属性。例如，Firefox确实利用了这一点，很可能其他浏览器也会利用这一点。

Answer 2

如果其他人不知道更新SVG-Path数据属性的快速方法是什么(对于实时应用程序)，我在上面运行了一个小测试：

http://jsperf.com/svg-path-test

是的，将其设置为string意味着需要对其进行解析，这与DOM SVG接口的情况不同，但是第一种方法仍然要快得多。接口可能会根据添加的每个点更新DOM，从而减慢整个过程。