Jump to content
Search Community

Rotating svg element works on chrome but not firefox

ps3 test
Moderator Tag

Go to solution Solved by ps3,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

When I apply this code to a div it works in both firefox and chrome

 

 
      TweenMax.to(test, .1, {rotationX:90});
      TweenMax.from(test, 2, {delay:3, rotationX:450, transformOrigin:'right center'});
 
When applied to a SVG group (of elements) 
it works in chrome but NOT firefox
 
other transfoms appied to SVG groups work in both browsers
TweenMax.from(pathone, 2, {delay: 1,scaleX:0, scaleY:0, });
// hide sign 4 then rotate in
TweenMax.from(pathfour, 2, {delay: 4,scaleX:0, scaleY:0, });
TweenMax.from(pathfour, 3, {delay: 4,rotation: 90, });
 
Latest version of each browser
Not sure what I have wrong here
 
Thanks for any help
PS3
Link to comment
Share on other sites

  • 11 months later...

Hi fremdev  :)

 

Welcome to the GreenSock forums.

 

That's correct. Nothing has changed since the original question above. The SVG spec doesn't support 3D transforms. 

 

The SVG itself is a DOM element and you can rotate that all you want. It's only the children of the SVG - rectangles, circles, paths etc. that won't work.

 

If you need some 3D transforms, you could break your SVG into separate pieces and rotate them as individual DOM elements or place them in a div that you can rotate. You can also do a fake rotation. Scaling x from 1 to -1 looks somewhat like a y rotation and scaling y from 1 to -1 looks like an x rotation. It doesn't show any perspective so it's not great, but may work in some situations.

 

I'm not 100% sure what you mean by a mirror picture.

 

If you have additional questions, please start a new topic. Since this question was already marked as answered, additional questions can easily get overlooked and we want to get the best answers possible for you in a timely manner.

 

Hopefully that helps a little bit.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

  • 2 years later...

This topic seems really relevant to an issue I'm running into. Chrome, Safair, even IE10 all work fine, but in Firefox I'm unable to rotate the contents of an SVG mask: 

See the Pen wbMxex by creativeocean (@creativeocean) on CodePen

 

As time was short, I found a decent work around by avoiding masks altogether, but I'd still love to know if anyone has any insights into this issue. Thanks!!

Link to comment
Share on other sites

Actually, @PointC's answer triggered an idea for me and after some research I discovered the problem with your pen. You're gonna laugh. 

 

Your <svg> element has the wrong namespace. You used xmlns="https://www.w3.org/2000/svg" but there shouldn't be an "s" in the protocol. It should be xmlns="http://www.w3.org/2000/svg". 

 

The wrong namespace made it impossible to call getBBox() on your SVG <rect>! Weird, I know. None of this has anything to do with GSAP. But since it failed to return a getBBox(), GSAP decided it's not a normal SVG element and it applied the transforms via CSS styles rather than the transform attribute. And Firefox ignores CSS transforms applied to masks. 

 

So fixing that namespace allowed GSAP to see that the element is indeed an SVG element, and apply the transforms to the attribute, making it animate properly :)

 

Phew!

  • Like 2
Link to comment
Share on other sites

Ha! I thought that was so weird it wouldn't rotate, but then again I hadn't rotated a mask in quite some time so I just tried adding the attribute to see if it would work. I didn't even think about checking the rest of the SVG code.

 

That's why Jack wears the cape. ;)

  • Like 2
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.
×
×
  • Create New...