Masking - SVG
The SVG `<mask>` element can be used to
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.
<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>
Sorry, your browser does not support inline SVG.
</svg>
Example
Example Code
htmlSVG 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="svgmask5">
<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(#svgmask5)"></image>
Sorry, your browser does not support inline SVG.
</svg>
Example
Example Code
htmlSVG 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="svgmask2">
</polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
Sorry, your browser does not support inline SVG.
</svg>
Example
Example Code
htmlSVG 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="svgmask3">
</polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask3)"></image>
Sorry, your browser does not support inline SVG.
</svg>
Example
Example Code
htmlSVG 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="svgmask4">
<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(#svgmask4)"></image>
Sorry, your browser does not support inline SVG.
</svg>
Example
Example Code
htmlCSS 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 |