Select the definition element when doing SVG transforms on <use>.
I’ve discovered that styling
<use>s you must style its definition element
- Pen: Working, selecting the definition element.
- Pen: Not Working, selecting each
useinstance by class.
Weirdly enough, when selecting elements and applying styles, GSAP automatically fixes the second way, but only in Chrome, not in Safari.
However, there is a problem with no workaround: this method does not work when
staggering animations with GSAP’s
staggerTo, etc., because all the elements
are transformed together.
The only way I’ve found to stagger animations is to manually duplicate the element:
See also: Reusing Stored elements with the <defs> element by Sara Soueidan.