Use case:
As a user, I want to be able to modify the order of the SVG elements and be able to animate predictably afterwards.
Codepen:
http://codepen.io/anon/pen/pgYmzV
Steps to reproduce:
Hit the "Go Left" and "Go Right" buttons, this is correct baseline animation I want to preserve.
Then if you restack the elements by hitting Order +, it will remove the element and reposition it above.
When you hit "Go Left and "Go Right" again, the animation is slightly changed.
Now if you hit "Order -" the element will reposition below.
Hit "Go Left" and "Go Right" again, the animation is different.
Repeating steps 2 through 5 will make the animation progressively worse.
In the fixMatrix function, I log the transform element. As you can see, the xOrigin and yOrigin values change each time the stacking order is modified.
At this stage, I don't know what to propose for a solution, so I am just opening the dialog about this issue.