A trick i use to make SVG transformations easier to work with is:
- draw the shape at
0,0 - apply transformations
- use
translate(x y)to position it
<ellipse rx="3.5" ry="2.5" transform="translate(7 6) rotate(30)"/>
(note that transforms are applied “backwards”, so this will rotate the ellipse first, and then translate it)
the reason this works better is because transformations are centered at the origin, not the center of the current shape. so using cx/cy (or x/y etc.) to position the shape “before” applying the transformation probably isn't what you want:
<ellipse rx="3.5" ry="2.5" cx="7" cy="6" transform="rotate(15)"/>
(You could manually specify the rotation center point, with rotate(15 7 6), but now you're writing the coordinates twice. also: other functions like scale() and skewX/Y() don't support this)
Note: mathematically, the transformations aren't actually applied in reverse order, but I think that's the most intuitive way to understand it
