Share Posted March 29, 2019 I feel like an idiot asking this because I thought I knew how to do this. I'm trying to move all `<g>` elements to the center of an SVG. The first one seems to work but the other 2 barely move. I'm having a brain cramp. Probably not enough sleep.. See the Pen XQrdYW?editors=1010 by swampthang (@swampthang) on CodePen Link to comment Share on other sites More sharing options...
Share Posted March 29, 2019 Like this? See the Pen XQrNWO by PointC (@PointC) on CodePen Happy tweening. 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 29, 2019 Ahhhh, ok. So trying to set an origin on a `<g>` element doesn't work? Link to comment Share on other sites More sharing options...
Share Posted March 29, 2019 SVG groups are funny little things that don't always behave the way you'd think and some of the browsers get a bit fussy when you try to position them. getBBox() works well for initial positioning, but is not without its own caveats. If you don't have any transforms applied, you'll be good to go. If you have applied transforms, the data will be incorrect. Blake did a really nice write-up here: Depending on what you're doing, another option is to create all of your elements at (0,0). It's not always practical, but it makes positioning fairly simple. Happy tweening. 3 Link to comment Share on other sites More sharing options...
Author Share Posted March 29, 2019 Thanks a bunch! 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