Sample points on an svg path

Question

Given an SVG (which contains a single path object), I want to divide the path into n segments of equal length. The returned value should be list of (n+1) points (x, y) coordinates in rasterized svg indicating the ends of every segment

Example:

Given SVG : (this example has only straight lines but the solution must work for all types of paths including cubic and quadratic beziers)

renders as

Expected output : coordinates of each of the red dots below considering bottom left corner as origin. The SVG is rendered at width=100px always

I am using python and svgpathtools, how can I achieve this ?

My approaches :

Take a look at SVG rasterizers. See how they handle paths. I took a look at this but sadly couldn't understand the code well enough to implement it myself
Add a stroke-dasharray to my path. stroke-dasharray will "break" the continuous stroke into equal sized segments automatically. Then rasterize this modified SVG, then use something like OpenCV to cluster the rendered stroke. Then find midpoint of these clusters to get the answer. This approach is terribly slow due to multiple slow processes (rasterization + clustering) involved in it. It is also not very flexible in case a path crosses itself (infinity sign) since the stroke-dasharray will also intersect giving a weird intersection point
I had a look at this question but I am not sure how this will work in my case where the SVG is always rendered at width=100px (height autocalculated based on aspect ratio of SVG), moreover the approach mentioned here is supposedly "slow". Moreover, I am not sure if this linked question gets me points "on" the path or the control points for svg path

While approach 2 works for many images, I certainly don't want to go that way because it's horribly slow. Is there a better approach ?

user_7394871 · Answer

Given an SVG (which contains a single path object), I want to divide the path into n segments of equal length.

I used the effect of the appearance of dots when two conditions were met:

There must be zero stroke (dash) length in the attribute stroke-dasharray = "(0, N)"
stroke-lineCap="round"

I used getTotalLength() JS method to get the full line length of an SVG element

As you can see in the console, the result is ~= 577.2px

Let's say we need to divide the length of the line into 11 equal segments:

577,2 / 11 = 52.47 In this case, stroke-dasharray =" 0, 52.47 "

For 22 equal line segments:

You can increase the stroke-width, the diameter of the points will increase proportionally, but the distance between the centers of the points will remain unchanged.

stroke-width="8"

UPDATE

Commented @ashutoshbsathe

I'll give this a try with some more SVGs before accepting this as a final answer

To test the universality of this technique of dividing the perimeter into N equal parts for different figures of the SVG

#1. Divide the square into 4 parts

#2. Divide the square into 16 parts

#3. Divide the star into 5 parts

#4. Divide the star into 10 parts

#5. Divide the hexagon into 6 parts

#6. Divide the hexagon into 12 parts

#back {
fill:none;
stroke:black;
stroke-width:1;
}
#p1 {
fill:none;
stroke:red;
stroke-width:4;
stroke-dasharray:0,15.82;
stroke-lineCap:round;
}

Sample points on an svg path

1 Answers

UPDATE