Question

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

结果示例将是转换 this circle，this n-gon that looks almost like a circle。为缺乏好的例子而道歉，因为我真的不知道如何将曲线转换为多条小直线。

Answer 1

你不需要一个图书馆。 SVG有两个路径的DOM API：getTotalLength和getPointAtLength。有了这两个，你可以很容易地做你想做的事。

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

＆＃13;

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")
}

＆＃13;

<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>

＆＃13;

SVG曲线为许多小直线

1 个答案: