SVG Mask Problem

[chris_r]

Warning: mask newbie here.

I'm applying a mask in an SVG per the link below but it's not working.

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

 

The way I read it, white reveals, black hides (filled  rects inside the mask def).

I'm applying the mask to a group (the husky head).

The mask should be the same area as the rounded rectangle visible behind the dog head.

So theoretically the dog head should be masked to just inside the rounded rectangle.

Any insight appreciated...

 

UPDATE: I fixed the issue per Craig's advice, so Codepen now shows a properly functioning mask.

 

See the Pen gOpzLyV by crawley27 (@crawley27) on CodePen

[PointC]

Best not to scale the group you're masking. Try using a parent group around the one you'll be scaling and mask the parent. 

 

 <g mask="url(#masker)">
   <g id="husky-color" >
    <!-- paths  -->
  </g>
</g>

Looks like you'll need to make some change to the mask position and rectangle too since you're using a nested SVG with a different viewBox. For the record, I'd strongly recommend not using nested SVGs as they're nothing but trouble. Just my two cents.

 

Hopefully that helps. Happy tweening.

 

[chris_r]

That worked perfectly.

Thanks for the tip on nested SVGs, killed that too.

Should have posted here sooner - I was killing a lot of time on this issue last night.

 

Cheers.