Advertisement


SVG mask not working


Question

I have an SVG vector object that consists of a few paths, some of which need to be masked.

For this I've made 5 SVG masks. All of them seem to be working (i.e. masking their respective object), except for one! I'm probably missing something obvious, but I'm not seeing it.

In short: how do I get the visible element within the circle to be properly masked? Any pointers would be hugely appreciated.

The object is up at this pen: http://codepen.io/anon/pen/LNYOya

2016/02/27
1
3
2/27/2016 9:17:00 PM

Accepted Answer

Actually the one mask you thought wasn't working was the only mask that was working!

You had the mask ID's and path ID's named in reverse order. You can see this by selecting the paths in Illustrator. Here I have selected path l-1-1 and mask mask-l-1-1 and you can see they are different paths:

enter image description here

The reason it seemed as though the other masks were working is that you had the stroke on the masks set to white (#ffffff), which shows whatever it is masking, so it was revealing the wrong area and therefore revealing nothing. The one mask you thought wasn't working was the only mask set to the correct path. To use the mask to hide the path you need to set the stroke color to black (#000000).

I've updated your SVG code here.

2016/02/28
2
2/28/2016 11:47:00 PM