English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The SVG mask feature allows you to apply masks to SVG shapes. Masks determine which parts of the SVG shape are visible and what opacity they have. You can think of SVG masks as a more advanced version of clipping paths.
This is a simple mask example:
<svg width="500" height="120"> <defs <mask id="mask1" x="0" y="0" width="100" height="100"> <rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff"/> </mask> </defs> <rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask1)"/> </svg>Test and see‹/›
This example uses ID=mask1Define a mask. Inside the <mask> element is a <rect> element. It is this <rect> element that defines the shape of the mask.
This example also defines a <rect> element using a mask. The <rect> element uses the CSS style property mask internally referencing the mask ID attribute.
Image effect after running:
Please note that the height of the rectangle to be displayed is100 pixels, but the vertical front50 pixels are visible. That is because the mask rectangle only50 pixels high. The rectangle is only visible in the part covered by the mask rectangle.
The size of the black outline rectangle is the size of the rectangle without a mask.
You can use any SVG shape as a mask. Here is an example using a circle as a mask:
<svg> <defs <mask id="mask2" x="0" y="0" width="100" height="100"> <circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/> </mask> </defs> <rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask2)"/> </svg>Test and see‹/›
Image effect after running:
Again, only the rectangle referenced by the visible mask circle is visible.
So far, the fill color of the mask shape (circle or rectangle) is set to #ffffff. The color definition of the mask shape uses the opacity of the mask shape. The closer the color of the mask shape is to #ffffff (white), the less opaque the shape using the mask will be. The closer the color of the mask shape is to #000000 (black), the more transparent the shape using the mask will be.
This is an example where the mask is made up of two shapes with different colors (#ffffff and66666consisting of rectangles. The mask is used for a single rectangle, so you can use the mask to see how two different shapes within the mask affect the same shape.
<svg width="500" height="120"> <defs <mask id="mask3" x="0" y="0" width="100" height="100"> <rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff"/> <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #666666"/> </mask> </defs> <text x="10" y="55" style="stroke: none; fill: #000000;"> This text is below the rectangle </text> <rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask3)"/> </svg>Test and see‹/›
This example also includes text below the rectangle, which can only be seen through the semi-transparent mask part of the rectangle.
Image effect after running:
If a gradient is applied to the shape used as a mask, it can achieve gradient transparency for the shape applied by the mask.
Here is an example of defining a gradient, using a gradient mask, a rectangle with a mask, and text below the rectangle, so you can see how the opacity changes with the gradient of the mask:
<svg width="500" height="120"> <defs <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"> <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> <stop offset="100%" stop-color="#000000" stop-opacity="1"/> </linearGradient> <mask id="mask4" x="0" y="0" width="200" height="100"> <rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#gradient1)"/> </mask> </defs> <text x="10" y="55" style="stroke: none; fill: #000000;"> This text is below the rectangle </text> <rect x="1" y="1" width="200" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask4)"/> </svg>Test and see‹/›
Image effect after running:
Gradient masks can be combined with other effects (such as fill patterns). Here is an example where the rectangle uses a fill pattern as its fill and a gradient in its mask:
<svg width="500" height="120"> <defs <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"> <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> <stop offset="100%" stop-color="#000000" stop-opacity="1"/> </linearGradient> <pattern id="pattern2" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff;" /> </pattern> <mask id="mask6" x="0" y="0" width="200" height="100"> <rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#gradient2)"/> </mask> </defs> <text x="10" y="55" style="stroke: none; fill: #000000;"> This text is below the rectangle </text> <rect x="1" y="1" width="200" height="100" style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/> </svg>Test and see‹/›
Please note how the rectangle refers to its CSS fill pattern attribute and how it refers to its CSS mask attribute.
Image effect after running.
You can also use a fill pattern within a mask to make the mask take the shape of the fill pattern. Here is an example:
<svg width="500" height="120"> <defs <pattern id="pattern1" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999" /> </pattern> <mask id="mask5" x="0" y="0" width="200" height="100"> <rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#pattern}}1)"/> </mask> </defs> <text x="10" y="55" style="stroke: none; fill: #000000;"> This text is below the rectangle </text> <rect x="1" y="1" width="200" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask5)"/> </svg>Test and see‹/›
After running the image effect. Please note that the rectangle is now semi-transparent, and the fill pattern draws a circle while the other parts are completely transparent.