Check the examples below to grab the differences between clipping and masking.
See in this demo below how we are using the same <rect> for the clipPath and the mask but the result is different.
This is because clip-path doesn’t take care of alpha. It will only clip the content that is within the boundary of the shapes in the <clipPath> tag.
On the right, the circle is impacted by the gradient applied to the <rect>.
Please note that mask is not only about grey values. If you have a path that is red, the mask effect will not be the same as if it was blue.
Quick tip: As your <clipPath> and <mask> elements won’t have to be rendered on screen, it is not necessary to wrap them inside a < tag.
<svg viewBox="0 5 100 40" class="clip-mask">
<linearGradient id="gradient" x2="0" y2="1">
<stop offset="0%" stop-color="black"/>
<stop offset="100%" stop-color="white"/>
</linearGradient>
<clipPath id="clip">
<rect x="0" y="15" width="100" height="20" fill="url(#gradient)" />
</clipPath>
<mask id="mask">
<rect x="0" y="15" width="100" height="20" fill="url(#gradient)" />
</mask>
<circle cx="25" cy="25" r="15" fill="pink" clip-path="url(#clip)" />
<circle cx="75" cy="25" r="15" fill="pink" mask="url(#mask)" />
</svg>
In this demo, we are updating the values of the circle used for the masking effect.
When the user moves their mouse over the SVG, the white fill of the circle is switched to black. This makes the circle fade out.
At the same time, we are updating the stroke-dasharray value (as seen in the #3 of viewBox). This makes the stroke visible and thus update the mask value according to the stroke styles.
Quick tip: When applying a mask on multiple elements, you can directly apply the mask attribute on a group tag!
Hover or tap to update the styles on the rectangle.
<svg viewBox="0 0 100 100">
<style>
#circleMask circle {
transition: 0.5s ease-in-out;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
svg:hover #circleMask circle {
fill: black; /* Fade out the inside of the circle */
stroke-dashoffset: 0; /* Make the stroke visible */
}
</style>
<mask id="circleMask">
<circle cx="50" cy="50" r="30" fill="white" stroke="white" stroke-width="15" pathLength="1" />
</mask>
<g mask="url(#circleMask)">
<path d="M25.4 35.4a9 9 0 00-7.5 4l1-.2a2.3 2.3 0 11-2.2 2.8 9 9 0 108.8-6.6zM83.2 42a2.3 2.3 0 01-4.5-.5 2.3 2.3 0 013.3-2 9 9 0 101.2 2.5zM83.2 42v-.5"/>
<path d="M50 82.7c-5.4 0-8.1-5.5-13-5.3-24.8 1.1-36-12-36-29.8 0-13 12.6-22.9 12.6-22.9S4 11.5 9.4 7.7c3.7-2.6 16.5 8 22.8 8.5 8.5.5 11-1.4 17.8-1.4M24.9 32.3A12.6 12.6 0 1037.5 45C27.4 34.3 31 37.9 25 32.3zm25-17.5c6.9 0 9.4 2 17.8 1.4 6.4-.4 19.1-11 22.8-8.5 5.5 3.8-4.1 17-4.1 17S99 34.6 99 47.7c0 17.7-11.3 30.8-36 29.7-5-.2-7.7 5.3-13 5.3M62.4 45A12.6 12.6 0 1075 32.3c-6 5.6-2.4 2-12.6 12.7zm-6.2 4c-2.9 2.9-4 4-6.2 4-2.3 0-3.4-1.1-6.3-4-1-1-1.9 6.6-.2 10.9.5 1.2 6.5 8.7 6.5 8.7s6-7.5 6.4-8.7c1.7-4.3.8-11.9-.2-11z"/>
</g>
</svg>
