Hi everyone

I hope its good place for my question.

Im using animateMotion to move several objects along path, its a horse race so they have different dur, keyTimes and keyPoints based on the data from php, so objects slows down, speeds up ect.
i got it working quite nice. (im proud of it as im a svg noobie)

Its a race so i want to add a dynamic Scoreboard which will show current positions of all objects.
Im stuck here.
so the question is: Is it possible to get info about position of object moving along path ? it would be best in percentage.
Now i have:

but its not good, since my objects have different speeds along the path, for example object1 move slow at beginning but speeds up along path, and is first at the end, object2 start fast, but slows down later, and is second at end.
the path is not a straight line, it has curves (it looks like serpentine or a river )

Anyone can help me ?

(sorry for my bad English)

regards
thelazyone

Hi, I actually asked this question a few months ago on this forum but never found a definite answer. I DO think it is possible though, and I think the answer lies in the method "getBBox()"

I am feeling a bit curious about this again so I think I will create a test to find out if this will truly solve this issue.

Thx for reply, i'l check that.

Hello there!

I have successfully gotten the coordinates of an element along an animation path. In this basic example I have used an interval to monitor an animated rectangle. As I said, the answer was in the method getBBox(). If you are going to monitor anything other than a rectangle, please note that getBBox() will always return the coordinates of the RECTANGLE surrounding the item and not the coordinates of the item itself. For example, if you are trying to monitor a circle you will need to calculate the center point of the BBox to find the center of the circle. Also note, getBBox does not return an actual svg primitive but rather an object.

I'm sure you can easily calculate percentages using the coordinates.

Here is a working example (click the red rectangle to begin animation): EDIT:: Link Removed, see below

Hi, i see its working, nice, unfortunate when i change <animate> to <animateMotion> it doesnt, well ... it work, but its just showing the beginning position of object, it doesn't see animateMotions move.

Hm yes, I see it does not factor in any transforms on the item which is quite unfortunate.

I will tinker a bit more.

I've tried many things with no luck, so i'll just cut my path into pieces, link them together and use java script at end of each piece to get time of each moving element.
Coiner thx for help.

Don't give up so soon because I have solved the issue!

I have modified the svgdoc from before. The method I found to work is "getCTM()" This method returns the "Current Transformation Matrix" of the element that it is called upon. All transforms on an element are held within a 2x3 matrix. Each entry in the matrix is stored in vars a thru f. Translation coordinates (which are what we want) are stored within the "e" and "f" variable. The translation is relative to the coordinates before the transform so you will want to take those and add them to the values stored within the matrix to get the element's current position. Example:



Working example: http://static.dorshnik.com/test/point-on-path.svg

You are THE MAN THX
i'll work on that.