跟踪svg路径（以离散步长获取x，y坐标）

Question

如何在SVG路径上找到许多（均匀分布的）点？

我发现此code pen上的操作已完成：

var bezierData = MorphSVGPlugin.pathDataToBezier("#anim_path");

但是，这取决于某些专有代码MorphSVGPlugin。

此功能周围是否有非专有代码（输入路径，输出坐标）？

Answer 1

这是我的处理方式： 我需要知道路径的长度（thePath.getTotalLength()）和段数：在这种情况下为10。然后，我使用getPointAtLength方法计算路径上各点的位置。最后，为路径上的每个点绘制一个圆。

var SVG_NS = 'http://www.w3.org/2000/svg';
let pathLength = thePath.getTotalLength();
let nSegments = 10;
// the segment length:
let segment = pathLength/nSegments;
for( let i = 0; i<=nSegments; i++){
 let p = thePath.getPointAtLength(i*segment);
 let o = {r:2, cx:p.x,cy:p.y} 
  drawCircle(o, svg)
}



function drawCircle(o, parent) {
  var circle = document.createElementNS(SVG_NS, 'circle');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      circle.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(circle);
  return circle;
}

svg{border:1px solid;}
#thePath{fill:none; stroke:black;}

<svg id="svg" viewBox="-10 20 120 60">
  <path id="thePath" d="M0,75Q33,75 50,50 T100,25"/>
</svg>