Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

center groups

Recommended Posts

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

Ahhhh, ok. So trying to set an origin on a `<g>` element doesn't work?

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.