使用javascript将点添加到svg路径

Question

I have an SVG path in the form:

M352.793,422 C323.175,422 299.164,397.99 299.164,368.371 C299.164,338.753 323.175,314.742 352.793,314.742 C382.411,314.742 406.422,338.753 406.422,368.371 C406.422,397.99 382.411,422 352.793,422 z

And I want to add an arbitrary number of points to it, evenly distributed, without changing the shape, so ending up with something like this:

M352.793,422 C337.895,422 324.416,415.925 314.698,406.118 C305.095,396.427 299.164,383.092 299.164,368.371 C299.164,352.91 305.707,338.978 316.174,329.191 C325.759,320.228 338.635,314.742 352.793,314.742 C366.299,314.742 378.639,319.735 388.068,327.975 C399.316,337.806 406.422,352.259 406.422,368.371 C406.422,383.21 400.395,396.641 390.656,406.351 C380.956,416.021 367.572,422 352.793,422 z

I know it is mathematically possible, as it is defined by bezier curves, which themselves can be split at arbitrary points, without changing the curve, but it seems like a huge task to work out how to do that maths, and generate the new path string.

Are there any libraries that can help?

Answer 1

From what I could find there is alot of javascript help for drawing bezier curver from the inital points, however I found none for reverse engineering. So the way I see it you have two possible approaches,

1)

Reverse engineering of the curve in order to get the original points, then recreate the curve with a lower t_step . The links below show the basic of how it is done.

Reverse engineering Bezier curves

Reverse engineering a bezier curve

2)

Though you may lose some precision I feel like it should be possible to use cubic spline interpolation to estimate the curve between each point.

Spline interpolation