Jump to content
GreenSock

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

Odd behavior with rotation on SVG G

Recommended Posts

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 by franklylate
added clarity that codepen pulled in update
Link to post
Share on other sites

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.

:)

 

  • Like 3
Link to post
Share on other sites

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? 

  • Like 1
Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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!

  • Like 1
Link to post
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.

×