APEX@IGP
Lesson 22
<mask>
Objective: Learn to create and use the <mask> element.
A <mask> is any graphic object or <g> element that can be used as an alpha mask to composite the current object into the background. Mask are mostly used for decorative effects, but can be used to change the shape of objects.
Mask elements can contain colors and gradients. These are not looked at in this tutorial. The mask colours have been set to white which means they have full opacity and masking effect.
Mask Attributes
All standard global attributes can be used. In addition <mask> has these specific attributes
x Defines the x axis coordinate in the user coordinate system. If not specified it defaults to 0.
y Defines the y-axis coording in the user coordinate system. If not specified it defaults to 0.
width Sets the horizontal width.
height Sets the vertical height.
maskUnits This can be userSpaceOnUse or objectBoundingBox.
maskContentUnits If used this specifically defines the coordinate system of the <mask>. It can be userSpaceOnUse or objectBoundingBox. If it is not used then the effect is userSpaceOnUse. If you use objectBoundBox use the contents of the mask use the bounding box of the element to which it is applied.
Masks are applied using the mask="url(#MaskID)" attribute.
<mask> is always defined in <defs>. Here is a sample mask not using units (therefore the default is userSpaceOnUse).
<defs> <mask height="100" id="mask1" width="160" x="0" y="0"> <rect fill="white" height="50" stroke="none" width="140" x="230" y="50"></rect> </mask> </defs>
This can now be applied to any shape. Here we will apply it to another rectangle.
<rect fill="blue" height="100" mask="url(#mask1)" stroke="none" width="160" x="220" y="40"></rect>
Here it is. The <rect> has been drawn with and without the clipPath so it can be understood what is happening. The gray line shows the position of the rectangle being masked.
Mask Units in Detail
Now let's take a look at maskContentUnits="objectBoundingBox". This time we are going to use a circle with a masking rectangle and look at four combinations of mask units and what has to be done to make them work. In each case there is a 200px diameter radius circle that has the mask applied to it's top half.
Circle1
In this example:
maskUnits="userSpaceOnUse"
maskContentUnits="userSpaceOnUse"
Here both the width and height and coordinates of the mask and rectangle are set in standard SVG coordinates.<mask id="mask2" x="0" y="0" width="200" height="200"
maskUnits="userSpaceOnUse"
maskContentUnits="userSpaceOnUse">
<rect x="0" y="0" width="200" height="100"
fill="rgb(64,128,128)">
</rect>
</mask>
Circle 2
In this example:
maskUnits="objectBoundingBox"
maskContentUnits="userSpaceOnUse"
Here the mask uses the proportional values of the target object so the units are 0, 0, 1, 1. In this case it is set to full height and width of the target object. The rectangle uses standard SVG coordinates to establish it's size.
<mask id="mask3" x="0" y="0" width="1" height="1"
maskUnits="objectBoundingBox"
maskContentUnits="userSpaceOnUse">
<rect x="200" y="0" width="200" height="100"
fill="rgb(192,192,192)"></rect>
</mask>
Circle 3
In this example:
maskUnits="userSpaceOnUse"
maskContentUnits="objectBoundingBox"
Here the mask uses standard SVG units and the object uses the proportional values of the target object container block.
<mask id="mask4" x="0" y="200" width="200" height="100"
maskUnits="userSpaceOnUse"
maskContentUnits="objectBoundingBox">
<rect x="0" y="0" width="1" height="0.5"
fill="rgb(128,255,255)"></rect>
</mask>
Circle 4
In this example:
maskUnits="objectBoundingBox"
maskContentUnits="objectBoundingBox"
Here the proportional values 0, 0, 1, 1 are used for both the mask and mask contents. Look at the numbers to see how simple it can be to define and apply a mask to multiple shapes if required without having to redefine any mask units.
<mask id="mask5" x="0" y="0" width="1" height="1"
maskUnits="objectBoundingBox"
maskContentUnits="objectBoundingBox">
<rect x="0" y="0" width="1" height="0.5"
fill="rgb(255,255,255)">
</rect>
</mask>
Masks for Decoration
The main use of masks is probably decorative effects. They can be used very effectively with images and text. Let's take a look at an example
<defs>
<mask id="maskT1" x="0" y="0" width="600" height="350"
maskUnits="userSpaceOnUse"
maskContentUnits="userSpaceOnUse">
<text x="300" y="180" font-family="Helvetica"
font-weight="bold" font-size="115px" fill="white"
stroke="white" stroke-width="10" text-anchor="middle">
INFOGRID<tspan x="300" y="300">PACIFIC</tspan>
</text>
</mask>
</defs>
<rect x="0" y="200" width="600" height="200" fill="rgb(0,100,150)"></rect>
<rect x="0" y="0" width="600" height="200" fill="rgb(0,150,100)"></rect>
<image x="0" y="0" width="600" height="500"
mask="url(#maskT1)"
xlink:href="/006_online.jpg">
</image>
The SVG is reasonably self-explanatory. The text has been defined in the <mask> element. The image is the target object and has been loaded onto the page in an appropriate position.
22.6 Exercises
Use the samples above to experiment with the attribute values for mask. Use your practice page to create your own SVG images using masks.
SVG Cheatsheets and Resources
Here are our standard SVG Cheatsheets you can download, print out and have ready when needed. There is also a text file containing annotated quickstarts for all major shapes and techniques.
SVG Editor. Access a full SVG Editor online at any time.