SVG кривая для многих небольших прямых линий

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 имеет два API DOM для путей: 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>