Mamboleoo Posted April 28, 2021 Share Posted April 28, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted April 28, 2021 Share Posted April 28, 2021 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" }); Link to comment Share on other sites More sharing options...
OSUblake Posted April 28, 2021 Share Posted April 28, 2021 @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. 1 Link to comment Share on other sites More sharing options...
Mamboleoo Posted April 28, 2021 Author Share Posted April 28, 2021 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 ^^ Link to comment Share on other sites More sharing options...
GreenSock Posted April 28, 2021 Share Posted April 28, 2021 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! 🙌 1 Link to comment Share on other sites More sharing options...
Mamboleoo Posted April 28, 2021 Author Share Posted April 28, 2021 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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted April 28, 2021 Share Posted April 28, 2021 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 3 Link to comment Share on other sites More sharing options...
OSUblake Posted April 28, 2021 Share Posted April 28, 2021 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)" /> 2 Link to comment Share on other sites More sharing options...
Mamboleoo Posted April 29, 2021 Author Share Posted April 29, 2021 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 ❤ Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now