Odd behavior with rotation on SVG G

[franklylate]

Hey all, I saw a lot of chatter on here that SVG G isn't necessarily supported but figured I would check -- I'm getting a really odd matrix transform for rotation on a SVG G elements. Seems like it's getting a translateX + translateY movement as well and swinging the animation strangely. Works perfectly for just SVG and I could rewrite to break out the g elements to separate SVGs (processor GULP!) but figured I'd check before I consider.

 

The browsers we're supporting take in transform: rotate(90deg) correctly on SVG G and I could probably rewrite for CSS tweens as well but they're always a pain.

 

Anyway, let me know eitherway!

 

Thanks

---

I didn't fork the broken codepen and now it's working as intended with the updates below.

See the Pen zQOEeE by jcollette (@jcollette) on CodePen.

Edited May 4, 2019 by franklylate
added clarity that codepen pulled in update

[PointC]

I think you should be able to use svgOrigin and this will work just fine.

 

svgOrigin: "367.52 367.52"

 

See the Pen VOZrro by PointC (@PointC) on CodePen.

 

Happy tweening.

 

[GreenSock]

Yeah, I guess I'm struggling to see the problem. As far as I can tell, it's behaving as expected. If you want to animate from the element's center, you could just add transformOrigin:"50% 50%" to your tween. Worked great for me. Otherwise, the default origin for SVG elements is always the top left. Maybe I'm missing something? 

[franklylate]

Nope, you guys have it exactly correct!

 

.rotateG g, .rotateG {
    transform-origin: 50% 50%;
}

 

wasn't producing the expected behavior but svgOrigin and transformOrigin in the tween is working exactly as it should!

 

Thanks

 

Updated codepen with loop+rotation at 

See the Pen zQOEeE by jcollette (@jcollette) on CodePen.

[GreenSock]

Yeah, CSS doesn't work very well cross-browser on SVGs, especially with transform-related values. That's why we strongly recommend setting values directly through GSAP instead, because it works around various browser inconsistencies/bugs.

 

Glad you got it working. Happy tweening!