SVG elements default origin

[Mamboleoo]

Hey there,

I'm working on a little demo with SVG and origins, and I realized that the default value for SVG element origin is not the 0,0 coordinates of the SVG (as default in most browsers).
But it is also not the center of my elements.

From the attached CodePen you can see that the default origin origin is the Top Left corner of each element.

 

I was wondering where that decision was from and if it shouldn't be noted in the docs?
https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

See the Pen c4e7f07558496b087c7ce275973f6b52 by Mamboleoo (@Mamboleoo) on CodePen

[OSUblake]

It's always been like that for SVG elements. Why? Because GSAP is forward thinking 😉

 

And this... transform origin was inconsistent.

https://css-tricks.com/svg-animation-on-css-transforms/

 

If you want it to be the center of the element...

gsap.set("rect", {
  transformOrigin: "50% 50%"
});

 

If you want it to use the SVG origin...

gsap.set("rect", {
  svgOrigin: "100 75"
});

 

[OSUblake]

@GreenSock would have to answer why GSAP defaults to the top-left of the element instead of the center, but I'm guessing it's because the smooth origin feature came later. If you've worked with complicated transforms before, like with canvas, you will know that changing the transform origin can cause the element position to change.

 

[Mamboleoo]

Yup that's precisely why I'm asking because I'm working on a small demo page for our viewBox newsletter with Cassie and I didn't understand where the "top left" value was from.

It could come historically from the smooth origin feature but I wanted to understand why those coordinates were picked ^^

[GreenSock]

It wasn't really "chosen" - we were following the SVG spec, that's all. Browsers use the top left as the origin by default for SVG, whereas other DOM elements use "center center". Kinda annoying, I know. But we try not to violate the spec unless there's a REALLY good reason.

 

Looking forward to the next newsletter! 🙌

[Mamboleoo]

I think there is a misunderstanding here  
With GSAP default origin, it takes the "top left" of each element. While the SVG specs define the default origin to the "top left" of the viewport as written here: https://www.w3.org/TR/SVG2/coords.html#InitialCoordinateSystem

 

I have updated my demo with a pure CSS animation, and you can see the difference where I don't set the origin (except for the last one).
Chrome, Firefox & Safari all use the origin of the viewBox, and not the top left of my rectangles.

 

To be honest I have no problem with this behaviour, but I was trying to understand why it didn't match with CSS animation and I don't know if it really worth adding a note in the docs as people will (I think) add a transform-origin if it doesn't work the way they expect

[GreenSock]

Yeah, I think WAAAAAY back when that decision was made, it was a bit of a compromise. "top left" of the element, not viewport, but if you want that behavior svgOrigin is your friend, like @OSUblake said (and I know you knew that). 

 

In retrospect, it may have been a good move to make it "center center", but changing it now would probably make a lot of people mad and break projects 

[OSUblake]

That's pretty new. I've known about it, but I don't think I've ever used it....

transform-box: fill-box;

 

Back in the day you had to put in the x and y coordinates for the origin to rotate around.

<rect x="145" y="100" width="30" height="30" transform="rotate(45 145 100)" />

 

 

[Mamboleoo]

Thanks you both for your answers, I've added some notes in my post!
Yup transform-box is quite new but has a good browser support. It's really life changing when playing with SVG ❤