Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Matt Severin

SVG clip issue with iOS Safari & Firefox

Recommended Posts

I am animating a photo within an SVG clip-path, what I have below works in IE11, Chrome and Desktop Safari, but doesn't work in FF and iOS Safari

 

 

I've been researching this issue here on the forums, and elsewhere, but I can't seem to implement the fix suggested here -

 

http://greensock.com/forums/topic/12062-masking-with-clippath-and-svg/

 

I understand the the Attr plugin could work, but I'm not quite sure how to utilize it.

See the Pen OMYEbX by mattparkerseverin (@mattparkerseverin) on CodePen

Link to post
Share on other sites

Hello Matthew Severin, and welcome to the GreenSock Forum!

 

This is happening because you are trying to animate elements with CSS inside a SVG <defs> element. The SVG spec states that graphical elements within a SVG <defs> tag are not directly rendered with CSS. So you must animate their attributes instead.

 

Firefox and iOS Safari will honor the SVG spec whereas Chrome, IE11, and Desktop Safari will allow it, but only for a brief time for developers to test.

 

<defs> element:

 

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

https://svgwg.org/svg2-draft/struct.html#DefsElement

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

This is not a GSAP bug or browser bug, bug the way the SVG spec dictates elements within <defs> tags.

 

You must animate the attributes instead of those elements inside <def>, and <symbol> tags. You can use the GSAP Attribute Plugin.

 

Here are some examples of animating SVG using the GSAP AttrPlugin.

 

My examples above uses the GSAP AttrPlugin to animate the SVG element within a SVG <defs> element. Normally GSAP will animate CSS, but in my example you will see that i wrap my attributes in a attr:{} object, to tell GSAP that the property is an attribute.

 

GSAP can animate any numerical property. It is only limited by what the browser supports, which is not GSAP's fault. If your SVG elements are not within a SVG <defs> or <symbol> element than you can animate like you were doing, which is animating with CSS properties. But if the SVG elements are inside a <defs> and <symbol> element  than you must use the GSAP AttrPlugin.

 

Again this is not a GSAP bug or a browser bug! Firefox always honors the spec.. whereas mostly webkit will not honor the spec in this regard.

 

Hope this helps! :)

 

Resources:

GSAP AttrPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

SVG def element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

W3C SVg 2.0 <defs> element: https://svgwg.org/svg2-draft/struct.html#DefsElement

  • Like 6
Link to post
Share on other sites

Hey there, I knew it wasn't a GSAP bug, and that FF treats the issue differently.

 

Thank you for the extensive write up! I will review now.

  • Like 2
Link to post
Share on other sites

Amazingly thorough, Jonathan. A good read for all!

  • Like 1
Link to post
Share on other sites

So, interesting, I tried re-ordering the divs, and it works!

No use of attr:{}, still using clippath, not mask.

 

I nested as <defs><clippath><path />

 

The nesting order found in my old codepen came from an Illustrator svg export.

 

Old - 

See the Pen OMYEbX by mattparkerseverin (@mattparkerseverin) on CodePen

 

New (works in FF/iOS) - 

See the Pen WrBLWx by mattparkerseverin (@mattparkerseverin) on CodePen

  • Like 2
Link to post
Share on other sites

Hello again Matthew Severin,

 

Sorry, I forgot to mention that besides the GSAP AttrPlugin, you can also use the GSAP MorphSVGPlugin, which animates the data (d) attribute when SVG elements are inside a <defs> and <symbol> element.

 

Whats happening in your new codepen is that:

  • $path0 is within the <defs> tag, and it works in Firefox / iOS since your using the MorphSVGPlugin which animates attributes, not CSS.
     
  • $hero1 is using a from() tween and that is just animating the <svg> tag with CSS as usual.

If you were to try and animate an element without the AttrPlugin or the MorphSVGPlugin than the elements would not animate in Firefox due to the SVG spec regarding the <defs> element and what i stated above.

 

But I am glad you got it working. Happy Tweening :)

 

Resource:

MorphSVGPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/

  • Like 3
Link to post
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.

×