javascript - 跟踪 svg 路径（以离散步骤获取 x,y 坐标）

Question

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

我发现它是在这个代码笔上完成的：

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

但是，它依赖于一些专有代码MorphSVGPlugin。

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

标签： javascriptsvg

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>