Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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
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:
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.
I don’t think you want to use masks for this. Masks are for masking out part of a bitmap image, but you are using them to mask paths. Instead, just make the paths you actually want to make. If you want a hole in an object, make a circle path and punch it through the object. If you want to remove some nodes, select them and delete them. Ideally, if making a logo you should end up with just one path object.
If you are not using a vector drawing tool, definitely consider using one. Generally speaking, the reason to edit SVG code is to optimize an existing image (for example to replace a shape with a rotated version of another shape) or to add interactivity or animation. The first step is to make your visual drawing with the visual tools that are the right tool for the job.
