Question

Using JavaScript to dynamically add and animate text in a specific group in SVG, I’m getting a very bothersome problem that just doesn’t make any sense to me. Based on the documentation, each animate element should individually affect only their direct parent element, which is in this case each individual text element. The problem is that, say I create one animated text element at 0s and another at 1s, and the animation for both of them lasts 2s. The one started at 1s will be halfway through its animation. Then, to make matters worse, every animate thereafter is basically stuck at the end of their cycle.

I’ve tried setting begin="indefinite" and firing it off with element.beginElement(), but this produces the same problem. I’ve checked the structure using Chrome’s element inspector and there isn’t any problem–every animate is inside of a text and every text is inside of the g.

Why is it doing this and how do I make each animate unique?

Answer 1

After a LOT of fiddling I managed to find a very choppy workaround by calculating the time offset between when the document was loaded and when the animate element is created, setting the begin attribute to that amount divided by 1000.

starttime=+new Date
begin=(+new Date-starttime)/1000

I would still like a better solution, however… is there any more efficient way to make an animate element begin when it’s created rather than recording and calculating timestamps? At the very least I’d like to use wallclock() because that’d save the choppy calculations, but I can’t get that to work.

Edit: I’ve found a better solution which works well: SVG.getCurrentTime()