SVG Clipping and Masking
SVG Clipping and Masking
SVG elements can be clipped and masked.
The <clipPath>
element is used to clip an SVG element.
The <mask>
element is used to apply a mask to an SVG element.
SVG Clipping
Clipping is when you remove a part from an element.
For clipping, we use the <clipPath>
element.
Every path/element inside a <clipPath>
element is inspected and
evaluated. Then every
part of the target that lies OUTSIDE of this area will NOT be rendered. In other
words: Anything outside the path is hidden and anything inside is shown!
The <clipPath>
element is usually placed in a
<defs>
section.
Let's look at some examples:
In this example, we create a red circle centered at (50,50), with radius 50:
Here is the SVG code:
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100"
fill="red"
/>
</svg>
Now we add a <clipPath>
element with a single
<rect>
element. This
<rect>
element would cover the UPPER HALF of the
circle. The <rect>
will NOT be drawn; Instead, its size and position will be used to determine which
pixels of the circle that will be shown. Since the rectangle
covers only the upper half of the circle, the lower half of the circle will
vanish:
Here is the SVG code:
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="cut-bottom">
<rect x="0" y="0" width="200" height="50" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100"
fill="red" clip-path="url(#cut-bottom)"
/>
</svg>
Try it Yourself »
SVG Masking
For masking, we use the <mask>
element.
The <mask>
element is used to apply a mask to an SVG element.
A mask is referenced with the mask
attribute.
Here is a simple mask example:
Here is the SVG code:
Example
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask1">
<rect x="0" y="0"
width="100" height="50" fill="white" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="100"
fill="red"
mask="url(#mask1)" />
<rect x="0" y="0" width="100"
height="100" fill="none" stroke="black" />
</svg>
Try it Yourself »
The example above defines a mask with id="mask1"
. Inside the <mask>
element there is a <rect>
element. This <rect>
element defines the shape of the mask.
The example also defines a <rect>
element
which uses the mask. The mask is referenced with the mask
attribute.
The red rectangle should be 100 pixels high, but only the first 50 pixels vertically are visible. This is because the mask rectangle is only 50 pixels high. The rectangle is only visible in the parts covered by the mask rectangle.
The last <rect>
element is just to
show the size of the rectangle without the mask.
Here is another example that uses a <circle>
element
to define the shape of the mask:
Here is the SVG code:
Example
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask2">
<circle cx="50" cy="50"
r="30" fill="white" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="100" fill="red" mask="url(#mask2)" />
<rect x="0" y="0" width="100" height="100" stroke="black" fill="none"/>
</svg>
Try it Yourself »
Fill Color and Opacity
The fill color of the elements inside the <mask>
element defines the opacity of the fill color of the element that refers to the
mask.
In the examples above we have only used fill="white". In a mask, white is treated as an area that will be shown, and black is treated as an area to be masked.
A mask will be more opaque the closer the color is to #ffffff (white) and more transparent the closer the color is to #000000 (black):
Here is the SVG code:
Example
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask3">
<rect
x="0" y="0" width="100" height="30" fill="#232323" />
<rect x="0" y="30" width="100" height="40" fill="#454545" />
<rect x="0" y="70" width="100" height="30" fill="#878787" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="100"
fill="red" mask=" url(#mask3)"/>
</svg>
Try it Yourself »
Gradients in Masks
In this example the mask shape uses a gradient as a fill color:
Here is the SVG code:
Example
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1">
<stop
offset="0%" stop-color="#ffffff" />
<stop
offset="100%" stop-color="#000000" />
</linearGradient>
<mask id="mask4">
<rect x="0" y="0"
width="100" height="100" fill="url(#gradient1)" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="100"
fill="red" mask=" url(#mask4)"/>
</svg>
Try it Yourself »