SVG and Transform origin quirky behaviour

[Dipscom]

Hey there,

 

I have been digging into SVG a bit recently, following some of the posts of people raving all about it. I have a decent understanding of the viewbox and the coordinate system, at the very least to know there are gotchas there.

 

In the pen attached, I have some tests about scaling and the transform origin. It is interesting to see that if I try to scale a <g> tag it will default to the top left of that tag, not the 0,0 of the coordinate system. Also if I set the transform-origin to anything other than the default value, it will - for some reason, break the actual positioning of the <g> but not in a manner I would expect. But the same thing does not happen if I try to scale up a <path> element.

 

I have seen Chris Gannon's SVG banner, haven't taken it completely apart yet and so, I would expect to find something interesting when I do.

 

anybody with some insights as to why this behavior when manipulating the transform origin?

See the Pen ZbRMYw by dipscom (@dipscom) on CodePen

[GreenSock]

I'm about to run out the door, so I didn't have much time to dig into this but it appears as though the problem is just that you scaled everything down BEFORE you set the transformOrigin, thus they scaled down using the default origin of 0,0. 

 

So imagine a box with its origin in its upper left corner, and then you scale it to 0. It would basically be infinitely small, right on top of where the top left corner was. Then, if you scale up from transformOrigin:"50% 50%", think about where that "center" would be at that point - basically the same place because the element has no width/height anymore and is sitting right on the upper left corner. 

 

The solution should be pretty simple - just set the transformOrigin up front. Add transformOrigin:"50% 50%" to your scale:0 tween. Or do a separate set() before the rest of the code runs. 

 

Does that clear things up? 

[Dipscom]

It certainly stops the quirky behavior. A-M-A-Z-E-I-N-G-G.

 

Also, what you have explained does make some sense on paper. But how it actually behaves in the browser, it doesn't. I would have expected the svg in the <g> tag to have moved to the 0,0 of the coordinate system but if only moves to the 0 on the X position.

 

Anyway, I am glad all I have to do is remember to set the origins before scaling.

 

Thanks, Jake.

[GreenSock]

The <g> wouldn't go to the 0,0 of the coordinate system because the default transformOrigin is 0,0 of the element itself (in this case the <g>). Make more sense now? You could, of course set svgOrigin:"0 0" if you want. 

[Dipscom]

Jack, it does now.

 

I thought the <g> was only moving on the X axis but, it is behaving exactly as you have described, I just could not see it while the animation was looping.

 

I went back and modified the pen a bit to illustrate the different behaviors, with a little overlay of where the 0,0 of the <g> is. Now I can easily see what is happening and makes perfect sense.

 

Thank you, as always, you're spot on.

 

I want to be like you when I grow up.