CSS SVG Mask Layers
CSS SVG Mask Layers
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.
Example
An SVG mask layer (formed as 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>
Try it Yourself »
SVG Mask Layer - Ellipse
The SVG <ellipse> element
is used to create an ellipse.
Example
An SVG mask layer (formed as 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>
Try it Yourself »
SVG Mask Layer - Triangle
The SVG <polygon> element
is used to create a graphic that contains at least three sides.
Example
An SVG mask layer (formed as a triangle):
<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>
Try it Yourself »
SVG Mask - Star
The SVG <polygon> element can also be used to create a star-shaped mask layer.
Example
An SVG mask layer (formed as a star):
<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>
Try it Yourself »
SVG Mask - Multiple Circles
Here we define three circles with different x and y positions.
Example
An SVG mask layer (formed as circles):
<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>
Try it Yourself »
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 |
