5

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!

graph
  • 367
  • 1
  • 6
  • 18
  • In that case the path represents a mathematical function, so you could calculate the points on the function algebraically. – sbking Dec 12 '13 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 Dec 12 '13 at 22:27
  • Well, just have a look at the [actual SVG file](https://upload.wikimedia.org/wikipedia/commons/4/41/Interpolation_example_polynomial.svg) to see how it was done! Admittedly, it's source is horrible. – Bergi Dec 12 '13 at 23:56
  • @Bergi, the red dots seem to have been placed manually, or the computation 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 Dec 13 '13 at 01:07

1 Answers1

8

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.

musically_ut
  • 34,028
  • 8
  • 94
  • 106