Jump to content
GreenSock

timherbert

Chrome SVG Alpha Mask Bug

Recommended Posts

So I've been struggling to figure out how to resolve this issue and figured there has to be some kind of resolution to this by now as I've seen people reporting this bug with chrome for years it seems like. 

 

I managed to get it working in Firefox and IE, haven't checked anything else. Although Ie has issues with unset SVG Widths and Heights so it seems like I need to setup a backup script to set that on load for IE. 

 

But this is driving me nuts. I just want to animate some simple clouds through a background. The only problem is the clouds are using an alpha mask which won't seem to animate. 

 

Also this isn't the final animation, I am just trying to get it to work before I spend more time on it.

 

Any help would be greatly appreciated! 

 

Thanks.

See the Pen YPQjLW by timherbert (@timherbert) on CodePen

Link to comment
Share on other sites

Hi

 

Thanks for the demo.

 

I think you just need to make sure you group the mask and the masked image properly.

 

Please take a look at this demo I found on CodePen which shows an interactive mask effect

http://codepen.io/noeldelgado/pen/ByxQjL

I'm using that just so that it is really clear what the mask is and what is being masked.

 

Using a similar structure, I think you can get your clouds to work like this:

 

http://codepen.io/GreenSock/pen/50dc5c75b854798de4cafb79637dd093/

 

I found your SVG to be a bit daunting to work with, but hopefully this illustrates the concept.

  • Like 3
Link to comment
Share on other sites

ok. if it doesn't work, please provide a simplified SVG with just the image and mask that you want to animate.

I just realized that my demo does not use an alpha mask. Curious to hear your results.

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