center groups

[swampthang]

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

[PointC]

Like this?

See the Pen XQrNWO by PointC (@PointC) on CodePen

Happy tweening.

[swampthang]

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

[PointC]

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.

[swampthang]

Thanks a bunch!