Search code examples
mathsvgtransform

Netsed svg <g> and rotate create strange results

I've been trying to rotate multiple elements in <g> tags and there's unexpected results, what I do is :

<g transform="rotate(angle x1 y1)>
    <g transform="rotate(angle2 x2 y2)">
       <path>...</path>
    </g
</g>

What I want to do is rotate the parent and move the children with it then rotate the children with an additional angle. X2 and Y2 are suposed to be the pivot point for the second rotation but this is clearly not the case when the first angle is different from 0.

enter image description here

The small black dot on capture is X2 and Y2 (my pivot point) and with an angle2 of 90 and angle1 of 0 the rotation seems correct. When I change angle1 the pivot point is still correct but the second rotation isn't correct:
enter image description here

(here the angle1 is 20 and angle2 90) Did I miss something ? I considered removing the second group from the first one and just translate it to the pivot point location. Is it my only solution ?

Solution

  • So I figured it out, as I mentioned in my comment I found an answer on another question that explains the transform operations order : Here

    What it does is applying transform from deepest to the highest tranforms in hierarchy. To make my example work what I did is rotate the blue part on the position of the black dot position before the grey part rotation (first picture in the question) and it works now.