Create An SVG Image Mask
This is the code that I'm using to make makes for images with SVG
TODO
☐
show this with just a single image first
- This example shows how to make a transparent hole in one image to show an image below it
- The process is to make a mask with two rectangles in it. One white, one black.
- The white rectangle defines the area that will show. Anything that's black is transparent.
- Since the black comes after the white it's on top which means it makes the area transparent
- The background image is placed before the foreground in the code which means it's behind it
- By applying the mask to the foreground image with url(#main-mask) the background image shows through where the transparency is
-- end of line --