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

  • Did you use any software to create the SVG with masks? What is the expected result? Feb 27, 2016 at 22:46
  • I used Illustrator CS5.1 to produce the SVG, which I then edited a little to define the masks. I left all of the path data intact. The expected result is that all elements left of the words "het lekkerste van" are masked (i.e. invisible). Yet, there is one single element still showing, despite it being masked. Tested in latest Chrome and Firefox. Feb 28, 2016 at 16:15

2 Answers 2


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.

  • Thank you for your elaborate explanation! I've been making a few hours too many and it shows. Feb 29, 2016 at 9:26
  • No problem at all, I know very well what it's like! Sometimes it just needs some fresh eyes :)
    – Cai
    Feb 29, 2016 at 9:27

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.

  • 1
    I need the masks to produce a 'reveal' animation using parts of the logo. Also, I don't believe the spec limits the mask feature to bitmap images; AFAIK it can be applied to any shape. Still hoping to understand why this single specific mask does not seem to function. Feb 28, 2016 at 16:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.