SVG masking SVG but how to animate the mask?


#1

Hi

I’ve been trying to learn how to use SVG masks in Hype which I’ve successfully managed to do by importing my image as a svg element then using an separate svg circle as an assigned clip-path. Now that I’ve done that is there a way of animating the SVG mask? If I try to keyframe any of it’s properties it’s container moves but not the actual mask. Is there something I’m missing here? I have seen the advanced image masking FREE DL link but there looks like a heavy amount of code to what I’m hoping is something simple?

Thanks in advance…


(Freelancer) #2

check this template.
you can animate the Apple shape

LIVE PREVIEW


#3

Hi

I did check this template looks good but from my understanding it’s using a colour to match the background and isn’t using clip-path or mask to do the masking.

Unfortunately it’s no different to using a transparent png.

My issue is once I assign an SVG as a clip-path or mask if you try and move it the containing div around the mask stays in an absolute position.


(Freelancer) #4

the clipping is not properly supported in all browsers (or slows the page).
anyway,You can use a big mask in svg to cover the scene, but with flat/gradient color only


Google chrome does not support MASK?
#5

Doh as I feared. I have found clip-path doesn’t work if you’re masking an image element BUT if you mask an SVG element that has the tag within it that will work across all browsers :slight_smile: So SVG masking SVG (with image included) is fine. SVG masking anything else isn’t 100%.

Guess I’ll have to go the javascript route. Pity as if that worked would be perfect.


Google chrome does not support MASK?
Google chrome does not support MASK?
(Alex) #6

it is pity if the above quote is right answer.

Alex