Friday, April 14

SVGs: Cut shapes out of other shapes. Transparencies


While making a SVG graphic of an "id card" I realized I needed the top part of the card to have a transparent hole in it. Searching the internet mainly shows the "fill=odd" trick, and drawing the objects with paths. Which is ok if you want to cut a square out of a circle, or a circle out of a star. If you want to cut a rectangle with rounded corners, creating a path becomes much harder.

and then came Mask

I am not sure which article, or which blogger I first read about masks on. My initial thoughts were that it followed the same lines as the "fill=odd" trick. Then I saw a code example, and it all became clear. Mask is exactly what I was looking for.


Before I used mask, I had a rectangle with rounded corners, with the fill color set to the same as the background color.

Using the mask feature, we define the mask in the DEF section, and anything colored #FFFFFF is shown, anything #000000 is transparent.


Post a Comment