Jump to content


svg text in Google Chrome

Go to solution Solved by Carl,

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 have a static svg that I add some content to from JS and then I move it a bit in a tween.

I have mainly svg texts and  svg rect-s with a gradient filled each with.

The main idea is to slide the rect and then the texts to their final position.

Well this works just fine with Firefox, but Google Chrome fails to move the texts.


Although I am able to move texts with jQuery like $('.foo').attr('y', $('.foo').attr('y') + 100); but not with tweenmax.


Any thoughts?





Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums.


It would really help to see a demo of what you are experiencing, but 2 things to note


1: it appears there is Chrome bug that doesn't allow you to animate 2d transforms via CSS on SVG <text>, which is what GSAP does:  

<text style="transform: matrix(1, 0, 0, 1, 200, 50);">

so the solution is simply to wrap your <text> in a <g>

as shown here: http://codepen.io/GreenSock/pen/81a09bfb188379d967e65c0ca0bb7b02


2: the jQuery code you supplied is changing the y attribute of the <text> node like <text y="200">. If you want the equivalent to your jQuery code, use our AttrPlugin like so

TweenLite.to('.foo', 1, {attr:{y:400}});


  • Like 2
Link to comment
Share on other sites

  • 4 months later...

Thank you - was pulling hair out re the Chrome bug.  Wrapping in a <g> isn't practical for me b/c there are too many elements, but using the AttrPlugin worked.

Link to comment
Share on other sites

What could be done to animate SVG <text> in Chrome if it is defined by matrix?  Is there a way to set the X or Y value if the original code is just matrix?  Thanks again

Link to comment
Share on other sites

Interesting. It looks like you've stumbled across another browser bug; CSS transforms nested like your example don't seem to render properly which has nothing to do with GSAP (you can use Dev Tools and manually apply values to see what I mean). Luckily, GSAP has a solution built-in that you can tap into. We haven't documented it yet because we weren't sure how useful it'd be. Try adding this:

CSSPlugin.useSVGTransformAttr = true;

See my forked version of yours: http://codepen.io/anon/pen/azMbdm?editors=101


This setting just tells GSAP to always use the "transform" attribute of SVG elements instead of using CSS transforms. In other words, there are two ways you can apply a transform to SVG elements:

<rect transform="matrix(1, 0, 0, 1, 0, -200)" ....>
<rect style="transform: matrix(1, 0, 0, 1, 0, -200)" ...>

The setting ensures that GSAP does the first one instead of the 2nd one.


Why does GSAP default to the 2nd (CSS)? Because technically there is more flexibility there, as CSS transforms can be 3D whereas the SVG spec only accommodates 2D ones right now. But most people aren't trying to push SVG into 3D yet anyway, and some browsers (like IE) refuse to support CSS transforms on SVG at all, so we may actually shift to making the attribute-based one the default behavior in future versions, thus you wouldn't need this [undocumented] setting. But for now, go ahead and slap it in there :)


Make sure you're using at least GSAP version 1.16.1 for best results. 

  • Like 2
Link to comment
Share on other sites

Very grateful, thank you!  I'll test and report back.  For now, need some sleep :)

Link to comment
Share on other sites

This is great - thanks.


Another SVG shape quirk - what is the best way to get say 5 SVG boxes to tween to the same X value?  I don't think I can use "left" because the SVG boxes are not accepting position:absolute, unless I'm doing it wrong.


Is there Jquery/JS I should be using?  There's probably something really simple...

Link to comment
Share on other sites

Right - SVG coordinates work kinda like position:absolute anyway (at least in the context of the parent <svg> canvas, not the entire web page). 


The challenge here is that there are several different properties that can all affect the position:

  1. Attributes like "x" and "y", as in <rect x="20 y="50" ... > or cx/cy/r for circles.
  2. The transform attribute, as in <rect transform="matrix(1, 0, 0, 1, 20, 50)" ...>
  3. CSS-based transforms, as in <rect style="transform: matrix(1, 0, 0, 1, 20, 50)" ...>

I'd personally recommend sticking with only one of them for positioning to keep things simple. Although I guess a complicating factor would be the fact that you can have groups with the <g> tag which itself can have transforms applied. Yummy. 


You can use the getBBox() method on an SVG element to get the bounding box, and leverage that to make things line up using math. 


Perhaps it'd be best if you whipped together a sample codepen that demonstrates your particular scenario so that we can get out of the theoretical and get into the practical. Sometimes that really helps solutions emerge. 

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