I'm trying to animate a <PATH> within an <SVG> with transform. With the help of another post in the forums, I've managed to get the transform working, but I can't find a way to change the transform origin (css transform-origin doesn't work). It always performs the transform relative to the top left. Here's a basic demo I'm working with at the moment: http://jsbin.com/eyaqOLIY/1/edit?html,js,output
In the final version, I will be manipulating an SVG that is created by another javascript library, so I can't change the HTML output much --- I could add classes and such, but I can't go wrapping things in <G> elements, etc. The final will also have multiple paths within a single <SVG>, that I need to animate seperately, so I can't apply the animation to the SVG. I need to animate the <PATH>.
Any idea how I can animate the path relative to its center rather than the top left (needs to be compatible with IE9 and FF10)?
Thanks!
Matt