This is for the SVG animation experts:
I'm trying to read the properties of a <g> element that I'm animating along a path using <animateMotion>. My understanding is that animateMotion applies a transform to the element, instead of simply changing one property at a time (x, y, rotation, etc).
According to my notes, you can access the current animated value of any SVG attribute in Javascript with the animVal sub-property of the relevant property. For example, element.cx.animVal.value or element.cx.animVal.valueAsString.
But for transforms, the corresponding property is element.transform, which is of type SVGAnimatedTransformList. The animVal of the transform returns an SVGTransformList. Reading through the spec at that link, I should be able to get these properties from my animated element:
element.transform.animVal.numberOfItems
should return the number of items in the transform list. But instead, it returns 0.
element.transform.animVal.getItem(0) should return the first value in the transform list. Since it's apparently empty, I get an error when trying to access this property.
So, has anyone successfully used these properties and sub-properties to read values during animation, are they known to be problematic or unsupported, or am I doing something wrong?
Other things to note about my script:
- tested in Firefox and Chrome
- i'm logging out the properties every second with a `setInterval`
- the animation itself works fine. how I got there shouldn't matter too much but I can answer your questions with more details