Topics › Stack overflow

Moving SVG elements in Z

This a quick post prompted by a question of Stack Overflow about how to move one element drawn after another below it. Because of the way SVG works, sequentially drawing elements on the page in the order they are in the file, there is no simple way to do this. Instead you have to play with the DOM, grabbing the element you want to bury and inserting it into the beginning of the document.

SVG animation: Rotating elements

A few days ago, I wrote about creating a rotating 3D SVG cube, which involves using EMCAScript to redraw every line. However, simple two-dimensional transformations can be animated in SVGs with much less hassle using <animateTransform>. For example:

The code for this animated square is