Animating SVG <symbol> does not update <use>

[mak 0 Likes (Newbie)]

Why for example animating the fill attribute of an element inside a <symbol> has no effect but manipulating it once using jQuery's attr() function has?

See the Pen OyXaYY by MariusUniUlm (@MariusUniUlm) on CodePen

[Jonathan 5,389 Likes (Superhero)]

Hello mak, and Welcome to the GreenSock Forum!

 

This is due to the symbol tag being a structural element that is not rendered directly. Only the instances of the symbol element referenced through the <use> tag are.

 

SVG Symbol: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

 

You can also use the GSAP AttrPlugin to animate the values of elements inside the <symbol> element or <def> element.

 

Examples of AttrPlugin used with SVG:

 

GSAP SVG FIlter Gaussian Blur:

See the Pen GJPjjQ by jonathan (@jonathan) on CodePen

GSAP SVG Filter Hue-Rotate:

See the Pen MwPzox by jonathan (@jonathan) on CodePen

GSAP SVG Filter Displacement Turbulence:

See the Pen NqZPwd by jonathan (@jonathan) on CodePen

 

[Jonathan 5,389 Likes (Superhero)]

I also noticed that your example above does not work in Chrome.. but both jquery and GSAP (without AttrPlugin) change the fill in Firefox, even though it is not standard to the spec. But AttrPlugin is the best option to ensure true cross browser compatibility and performance with spec