Jump to content
GreenSock

ps3

Rotating svg element works on chrome but not firefox

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

The SVG spec doesn't recognize 3D transforms at all. So you can't do rotationX although technically Chrome does allow it. But we wouldn't recommend it because most browsers don't support it and it's not part of the spec at all anyway. Sorry. 

  • Like 4
Link to comment
Share on other sites

Thank you

yeah it works great in chrome :-)

Link to comment
Share on other sites

  • 11 months later...

Hi guys,

I would like to clarify: so there is no way to use something similar instead of 'rotationX', 'rotationY' for a part of svg? Is it possible to make 'mirror' picture without using rotationY?

Thank you 

Link to comment
Share on other sites

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

SVG 2.0 will support CSS 3D transforms but for now with SVG 1.1 all you get is support for CSS 2D transforms :)

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

Hey @creativeocean :)

 

If you drop a transform attribute on the mask element you can get FF to play nicely with a rotation.

 

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

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 1
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

Oh man! Jack you genius. Thanks a bunch for solving the mystery...hopefully this thread saves someone else some time/lost hair in the future! Many thanks again, Jack!

  • 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.
×