Jump to content
Search Community

Possible Bug with SVG text element transforms...

ElliotGeno test
Moderator Tag

Go to solution Solved by Diaco,

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

I think I stumbled on a bug trying to rotate text elements in SVG with Greensock...

 

It completely ignores the rotation of the text for both the house and the sun...

 

TweenMax.set(sunDegreesText,{rotation:degrees,transformOrigin:"50% 50%"});

TweenMax.set(houseDegreesText,{rotation:degrees,transformOrigin:"50% 50%"});

 

Any ideas?

See the Pen ZGrRZK?editors=001 by pyrografix (@pyrografix) on CodePen

Link to comment
Share on other sites

Looks to me like a browser bug with rendering rotated text (totally unrelated to GSAP). Remember in the Flash days when you couldn't rotate any TextFields unless you embedded the font? (otherwise it disappeared). I even tried wrapping your <text> in a <g> and rotating that...and in Firefox the text simply disappeared. Ha. Firefox definitely seems to be the most buggy browser when it comes to SVG. I don't think there's any way GSAP can work around that particular bug unfortunately. 

Link to comment
Share on other sites

Looks to me like a browser bug with rendering rotated text (totally unrelated to GSAP). Remember in the Flash days when you couldn't rotate any TextFields unless you embedded the font? (otherwise it disappeared). I even tried wrapping your <text> in a <g> and rotating that...and in Firefox the text simply disappeared. Ha. Firefox definitely seems to be the most buggy browser when it comes to SVG. I don't think there's any way GSAP can work around that particular bug unfortunately. 

Diaco fixed it!

 

I was able to rotate it myself with the transform attribute... so I knew it wasn't a browser bug.

Link to comment
Share on other sites

Wups, I think I just misinterpreted the effect you were going for. I thought the text was supposed to rotate, but now I think you wanted it to look straight (thus it had to rotate in order to appear straight as the rest rotated). Sorry about that. Seems to work fine (if that was the effect you were going for) :)

Link to comment
Share on other sites

So to be clear, it appears as though the issue was that Chrome has a bug that doesn't properly apply CSS transforms to <text> elements, thus the solution was to force GSAP to apply them to the "transform" attribute instead. 

I am not sure what the "bug" was, but the intention was to have the text counter-rotate thus looking straight at any angle.

Diaco's solution seems to work great! Thanks everyone!

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