SVG: find point on a curve

Question

Edit: the Answer (credits to @musically_ut for getPointAtLength, but it seems like I have to do the real work myself. Note: the "draw.circle"-syntax is from svg.js)

1. add your own Id to the path with .attr({id: "mypath"});

2. find it: var a = document.getElementById("IdOfSvgCurve");

3. Draw a few circles on the curve. Coordinates must be relative to starting point.

   var pt_start = a.getPointAtLength(0);
   for (var i = 0; i < len; i++) { var pt = a.getPointAtLength(i*10); var c = draw.circle(7) .fill({ color: "green" }) .move(pt.x - pt_start.x, pt.y - pt_start.y); }

Original Question:

Say I have an SVG curve, could be a bezier or an ellipse

<path id="SvgjsPath1044" d="M 125,75 a100,50 0 0,0 100,50"/>

http://jsfiddle.net/wVC7j/

How can I place dots right on that curve? Like this:

https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Interpolation_example_polynomial.svg/220px-Interpolation_example_polynomial.svg.png

It could be using something like pathLength, use a "coordinate system", or it could be by actually calculting points that are on the curve and adding them using their coordinates.

This is mostly for illustration, so I don't necessarily need a general solution.

I am using the svg.js library but could do this part "natively".

Thanks!

Answer 1

SVGPathElement has a function getPointAtLength().

You can use this function to find the points on the path and then put circle elements at those positions.