shrinkray

Yup, thanks so much. I've been researching a fix for the mask problem for a few days. So glad to have a solution that works cross browser (Mac & Windows). I've read several things that put down the clip-path using CSS, but this SVG method works just fine.

Thanks PointC, Thank you for your example, very helpful. I understand and apologize for the unnecessary complexity. Questions: The part that is to be masked is made up of smaller parts. Does each part of the group get ` mask="url(#svg-mask)" ` added? Are the parts to be removed from group? Thanks for the info on groups, I'd not found anything about that; very good to know. I'm testing the two questions above. Now the masked image does not appear at all. Does each shape need its own <def> defined mask? Or can the same be applied to many elements? The image complexity could be part of the problem here. I'll set about simplifying the image to make the work clearer. While it is not masking, and not the most elegant solution, I think it might work to add a 'cover' shape positioned to cover the group when outside the circle. I'd 'flunk' GSAP school if I implement that technique. --Greg

Hello Friends! Currently the SVG has buttons with simple hover treatments (mouseover and mouseout functions). This year the customer wants to have a mask head pop into a circle frame on hover, (pop away on mouseout). I have masked the head, but when running the hover effect, the mask travels with the head piece instead. The Gumby Head button will have mouseover and mouseout functions eventually, but this is a proof of concept to test how to build it. I plan to rewrite other animations in Timeline too. The button will link to a page with an amazeballs 3D animated Gumby, Pokey and Blockheads. Thanks so much! Greg (shrinkray)