多くの小さな直線へのSVGカーブ

Question

私はd3.jsを使用していません。 SVGパスの曲線を精度の高い多数の小さな線に変換するのに役立つJSライブラリがあるかどうかを知りたい。変換するパスの例は次のようになります。結果の <path d="M0 50 a50 50 0 1 0 100 0 a50 50 0 1 0 -100 0">

例this n-gon that looks almost like a circleに、 this circleを変換することであろう。曲線を複数の小さな直線に変換する方法がわからないので、良い例がないことをお詫び申し上げます。

Answer 1

あなたのためにライブラリは必要ありません。 SVGには、パス用の2つのDOM API、getTotalLengthとgetPointAtLengthがあります。これらの2つであなたが望むことをするのは簡単です。

あなたが望むセグメント数でパスの全長を分けて、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>