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"/>

/

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

.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!

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/wVC7j/

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

https://upload.wikimedia/wikipedia/mons/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!

• javascript
• svg
• svg.js

• In that case the path represents a mathematical function, so you could calculate the points on the function algebraically. – sbking Commented Dec 12, 2013 at 22:26
• 2 Snap.svg also has an intersection method which can find the intersection of two paths. You can create temporary vertical line paths, calculate the intersections, add points at those intersections, and remove the vertical lines. – sbking Commented Dec 12, 2013 at 22:27
• Well, just have a look at the actual SVG file to see how it was done! Admittedly, it's source is horrible. – Bergi Commented Dec 12, 2013 at 23:56
• @Bergi, the red dots seem to have been placed manually, or the putation was done server-side (or I'm confused by whacky svg syntax) Cuberto I'll look into Snap.svg; however that's yet another lib in my project ... – graph Commented Dec 13, 2013 at 1:07

1 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.