CODEWITHSUNDEEP
javascriptsvgsvg.js
graph
graph

Reputation: 387

SVG: find point on a curve

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!

Upvotes: 6

Views: 3719

Answers (1)

musically_ut
musically_ut

Reputation: 34288

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.

Upvotes: 10

Related Questions