Flash cards
Review the key moves
What is the main idea behind CSS SVG Mask Layers?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<___ width="600" height="400" xmlns="http://www.w3.org/2000/svg">Put the learning moves in the order that makes the concept easiest to apply.
The SVG <mask> element can be used to apply a mask to an image.
Here, we use the SVG <mask> element to create different mask layers for an image.
SVG Mask Layer - Circle
The SVG <circle> element is used to create a circle.
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1"> <circle r="150" cx="200" cy="200"
fill="#ffffff" /> </mask> <image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask1)"></image> </svg>SVG Mask Layer - Ellipse
The SVG <ellipse> element is used to create an ellipse.
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<mask id="svgmask1"> <ellipse cx="220" cy="150"
rx="200" ry="100" fill="#ffffff" /> </mask> <image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask1)"></image> </svg>SVG Mask Layer - Triangle
The SVG <polygon> element is used to create a graphic that contains at least three sides.
<svg width="600" height="400"
xmlns="http://www.w3.org/2000/svg"> <mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask> <image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image> </svg>SVG Mask - Star
The SVG <polygon> element can also be used to create a star-shaped mask layer.
<svg width="600" height="400"
xmlns="http://www.w3.org/2000/svg"> <mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon> </mask> <image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>SVG Mask - Multiple Circles
Here we define three circles with different x and y positions.
<svg width="600" height="400"
xmlns="http://www.w3.org/2000/svg"> <mask
id="svgmask1"> <circle fill="#ffffff" cx="75" cy="75"
r="75"></circle> <circle fill="#ffffff" cx="80"
cy="260" r="75"></circle> <circle fill="#ffffff"
cx="270" cy="160" r="75"></circle> </mask> <image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask1)"></image> </svg>CSS All Masking Properties
The following table lists all the CSS masking properties:
| Property | Description |
|---|---|
| mask-clip | Specifies which area is affected by a mask image |
| mask-composite | Specifies a compositing operation used on the current mask layer with the mask layers below it |
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |
| mask-type | Specifies whether an SVG <mask> element is treated as a luminance mask or as an alpha mask |