Loading lesson path
Concept visual
Start from A
Overview
<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.
Formula
SVG Mask Layer - Circle<circle> element is used to create a circle. Sorry, your browser does not support inline SVG.
An SVG mask layer (formed as a circle):
Formula
< 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>
Formula
< image xmlns:xlink ="http://www.w3.org/1999/xlink" xlink:href ="img_5terre.jpg"mask="url(#svgmask1)"></image> </svg>
Formula
SVG Mask Layer - Ellipse<ellipse> element is used to create an ellipse. Sorry, your browser does not support inline SVG.
An SVG mask layer (formed as an ellipse):
Formula
< 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>
Formula
< image xmlns:xlink ="http://www.w3.org/1999/xlink" xlink:href ="img_5terre.jpg"mask="url(#svgmask1)"></image> </svg>
Formula
SVG Mask Layer - Triangle<polygon> element is used to create a graphic that contains at least three sides. Sorry, your browser does not support inline SVG.
An SVG mask layer (formed as a triangle): <svg width="600" height="400"
Formula
xmlns ="http://www.w3.org/2000/svg"><mask id="svgmask1"> <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon> </mask>
Formula
< image xmlns:xlink ="http://www.w3.org/1999/xlink"xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image> </svg>
Formula
SVG Mask - Star<polygon>
Formula
element can also be used to create a star - shaped mask layer.Sorry, your browser does not support inline SVG.
An SVG mask layer (formed as a star): <svg width="600" height="400"
Formula
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>
Formula
< image xmlns:xlink ="http://www.w3.org/1999/xlink"xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image> </svg>
Formula
SVG Mask - Multiple CirclesHere we define three circles with different x and y positions. Sorry, your browser does not support inline SVG.
An SVG mask layer (formed as circles): <svg width="600" height="400"
Formula
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>
Formula
< image xmlns:xlink ="http://www.w3.org/1999/xlink" xlink:href ="img_5terre.jpg"mask="url(#svgmask1)"></image> </svg>
The following table lists all the CSS masking properties:
Formula
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 - positionSets the starting position of a mask layer image (relative to the mask position area)
Formula
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