Placing an object at a specific percentage along an svg path?

Question

Currently I'm using the <animateMotion> element to very quickly animate an object (defined by a path) to the correct end location. This is displaying ok in Chrome and I'm not working on getting it working with Batik.

But I'm curious: is there a better way to do this without the animating? To just draw it (at say 80%) along the length of a <path>?

Answer 1

If you're creating a static svg image then you should know in advance exactly where to place the object. You can e.g use a transform attribute to place the object where you want it.

If you're doing it without prior knowledge of where you want to place the object, then you can use javascript, the getPointAtLength method will give you a point on the path at a given length offset. You can query the computed total length of the path by calling getTotalLength.