SVG曲线为许多小直线

Question

我没有使用d3.js. 我想知道当前是否有任何JS库可以帮助将SVG路径中的任何曲线转换为指定精度的许多小行.转换路径的一个示例是: <path d="M0 50 a50 50 0 1 0 100 0 a50 50 0 1 0 -100 0">

结果的示例是将此圆转换 为看起来几乎像圆的n-gon.为缺乏好的例子而道歉,因为我真的不知道如何将曲线转换为多条小直线.

Answer 1

你不需要一个库.SVG有两个用于路径的DOM API:getTotalLength和getPointAtLength.有了这两个,你可以很容易地做你想做的事情.

只需将路径的总长度除以所需的段数,然后使用getPointAtLenght沿着路径使用这些步骤来获取线段的点数.

flatten(src1,5)
flatten(src2,7)
flatten(src3,11)
flatten(src4,100)

function flatten(path,num){
  var l = path.getTotalLength()
  var p = path.getPointAtLength(0)
  var d = `M${p.x} ${p.y}`
  for(var i = (l/num);i<=l;i+=(l/num)){
    p = path.getPointAtLength(i)
    d+=`L${p.x} ${p.y}`
  }
  path.setAttribute("d",d+"z")
}

<svg width="800" height="200" viewBox="0 0 800 200" fill="none" stroke="black" stroke-width="5">
  <path id="src1" d="M100 10 A90 90 0 0 0 100 190A90 90 0 0 0 100 10z"/>
  <path transform="translate(200 0)" id="src2" d="M100 10 A90 90 0 0 0 100 190A90 90 0 0 0 100 10z"/>
  <path transform="translate(400 0)" id="src3" d="M100 10 A90 90 0 0 0 100 190A90 90 0 0 0 100 10z"/>
  <path transform="translate(600 0)" id="src4" d="M100 10 A90 90 0 0 0 100 190A90 90 0 0 0 100 10z"/>
</svg>