Jump to content
Search Community

svg pattern transform browser compatibility

Bundy test
Moderator Tag

Go to solution Solved by Dipscom,

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

GSAP Masters,


Have come across a situation that you are all more than likely preloaded to fire back a response to explain why.


The codepen example above is handled allot different in chrome as it is to firefox or internet explorer (all that I have tested at this stage).


I was looking for a way to only transform on one shape but then pattern that render across the whole page as opposed to transforming lots of shapes all together (was killing my cpu). Chrome let me believe I was close to an answer until yeah the other browser checks bummed me out. 

Looking forward to your response.




See the Pen VejaGG by blazenbundy (@blazenbundy) on CodePen

Link to comment
Share on other sites

Hello Bundy,


Welcome to the forums!


I am afraid you will have to content yourself with little me while the masters have their two and a half hour sleep.


Looking at your pen (nice idea, by the way), I can tell you that GSAP is actually tweening the "patternChild" as expected. What is not happening in firefox is that the transform part of the pattern is not updating. The fill is. I am sure Jonathan, may have more info as to why that is the case. I know FIrefox has some issues with SVG and filters, for example but I have not delved deep into the pattern element as of yet. 


To me this is not a GSAP issue but, as you said yourself, a browser issue.

Link to comment
Share on other sites

Hello again Bundy,


I got really interested in your idea of animating the pattern asset before applying it so, I went and did some digging. It seems borderline possible, it does need a bit of thinking and some slightly deep knowledge of the viewport. Here were my steps:


I was made aware of a bug in Firefox when reading this article from Carl:

http://greensock.com/svg-tips - Scroll all the way down to the gotchas. 


Then I read this article slowly to understand the transforms a bit better:



While reading I was also tinkering with the pen you provided... And doing some searches for more info on the SVG bits. Based on the tips from Ana Tudor (the previous link) I went after more info on the viewBox and saw that you can have a viewBox for the pattern as well as the SVG.



Putting it all together, I got something working in Chrome, Safari and Firefox (on a Mac). I have checked it quickly and it does not seem to work in IE. That's something to explore later. Right now, I am not next to my home pc so, can't really troubleshoot it.


But, I hope this helps you a bit. It certainly was very interesting for me to hunt this thing down.


Here's my stab at your idea:



------ Edit ------

And once again Microsoft seem to be the villain of the story. Both of their browsers seem not to respect the negative viewBox definitions if using in the pattern element. I guess for now, that's as far as we can go. Unless someone knows any more about how IE and Edge parse the viewBox. From what I can gather here, it simply ignores negative minX and minY and clips everything.

Edited by Dipscom
  • Like 7
Link to comment
Share on other sites

G'Day Dipscom,


Thank you for investing interest and energy in deciphering the situation I discovered myself in!!!

I have picked up on two major points of interest from your discoveries with the lame point being the non non non bodacious microsoft browsers adhering of the negative min-x and min-y values on the viewBox.


The major kewl point was how you statically assigned the transform attribute with the scale and rotate against the patternChild and then invoked the animation as a parameter of the attr specifier!!!

Most Excellent work and again much appreciated.



P.S. Although no where near as intuitive as using the percentage transformOrigin algorithm in conjunction with gsap that chrome natively accepts but a most excellent outcome regardless!!!  :-D

  • Like 2
Link to comment
Share on other sites

  • 1 month later...
  • Solution



See the Pen zrBNLM?editors=1000 by dipscom (@dipscom) on CodePen


Take that, Microsoft. In yer face.


We can forgo the negative viewBox setup, instead use a <g> node with a transform. Check out the updated Pen. Checked via browserstack and it worked on everything that I cared to open on and that CodePen supported. So I guess this is a technique we can safely use now.


Off to make a hypnotic patter now to plaster on my profile. Thank you Bundy for the idea and challenge.


*fist up*!

  • Like 4
Link to comment
Share on other sites

Nice job Dipscom! :D


The reason that works Dipscom is that the <rect> #patternChild was nested inside a <defs> tag, and your using the GSAP AttrPlugin, instead of the GSAP CSSPlugin. Firefox was not animating the CSS transform due to the SVG <defs> element according to the SVG spec.


CSS is not directly rendered inside a SVG <defs> tag. That is why using the GSAP AttrPlugin works, since it animates the attribute values directly. Versus using trying to use CSS directly which the SVG spec states that graphical elements within a SVG <defs> tag are not directly rendered with CSS. So instead, you must use the GSAP AttrPlugin.



  • <defs>
    SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.

The same goes for the nested elements within an SVG <symbol> element. So as rule of thumb when animating SVG, if the element your animating is within a SVG <defs> or <symbol> element , then please use the GSAP AttrPlugin. But if it is not nested inside a <defs> or <symbol> element, then you can use GSAP as usual, knowing that it will use the CSSPlugin instead.


Just my two cents, with pocket lint :)

  • Like 2
Link to comment
Share on other sites

Thank you Jonathan,


The issue in here was using a viewBox inside the <defs>. Microsoft's browsers would completed ignore the negative amount I had place to center the rotation origin. I imagine it is something to do with the strictness of it. But we can achieve the same result by wrapping the <rect> into a <g> element and moving it without the need of any negative minX and minY in the viewBox.

Link to comment
Share on other sites

Dipscom, I'm going by Bundy's first codepen above where he is trying to animate CSS properties on a rect tag nested inside a <defs> elemnet. Firefox was not animating anything. Chrome did since it doesn't honor the SVG spec. But Firefox did not animate the boxes due to not directly rendering SVG graphical elements nested inside a <defs> element with CSS.


Because Firefox honors the SVG spec, whereas Chrome will allow it. Css properties are not directly rendered on a <rect> tag, when nested inside a <defs> tag. That <rect> tag is within a <defs> tag, and would only be animated by its attributes. That is why Bundy's pen was not animating. The viewbox was a separate matter.


But i see what you mean Dipscom. I guess im a little confused since i did not see any use of the viewbox attribute in Bundy codepen example above or in your codepen, even though it was discussed in the post.


I was just stating the fact that the use of the GSAP AttrPlugin is at the core on why you were able to animate the elements with. Since based on Bundy's first codepen, he was trying to animate with CSS transforms directly with the CSSPlugin, but it did not work due to the nature of the <defs> element, not rendering CSS directly. Firefox honors the spec that is why i did not see Bundy's first codepen working in Firefox.


The GSAP AtrrPlugin makes it work cross browser.


But great job Dipscom ;)

Link to comment
Share on other sites

Yes, I see now that we were talking from two different angles. I was following up on my previous comment, with all the background information of my own experiences and memories, where IE and Edge were not displaying the expected behaviour. Which, in hindsight, is not very clear for someone who is reading the thread. You, as you said yourself, were taking the view from Bundy's angle, right at the start and went to explain why it worked.


So, next time, I shall leave the attempted pens and make new ones so people can see the progress as the conversation goes. And, I will pay more attention to explain in more detail what and why I did.


Nevetheless, thanks to the joint powers of teamwork and willingness we have solved the puzzle and explained why! Good job team dips-than ;)

  • Like 2
Link to comment
Share on other sites

No worries Dipscom :D


You did great answering the question! I was just showing that Firefox was not animating anything due to CSS not directly rendering within a <defs> element.


But you were able to solve the problem in one fall swoop, by adding the nested group tag and the use of the GSAP AttrPlugin to apply the CSS transforms on the transform attribute. To get around that <defs> element SVG spec behavior, making Bundy's example work cross browser!


Awesome work Dipscom! :)

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