SVG Masks

by Online Tutorials Library July 14, 2022

SVG Masks

Using the SVG masking feature, you can apply a mask to an SVG shape. SVG mask is a more advanced version of a clip path and used to determine what parts of the SVG shape that is visible and with what transparency.

Example

  <!DOCTYPE html>  <html>  <body>    <svg height=”450″ width=”450″>   <defs>    <mask id=”mask1″ x=”0″ y=”0″ width=”100″ height=”100″ >      <rect x=”0″ y=”0″ width=”100″ height=”100″          style=”stroke:none; fill: #ffffff”/>    </mask>  </defs>    <rect x=”1″ y=”1″ width=”200″ height=”200″      style=”stroke: none; fill: #0000ff; mask: url(#mask1)”/>  </svg>    </body>  </html>  

Test it Now

Explanation

The id attribute of <mask> element defines a unique name for the mask.
The <rect> element of <mask> defines the shape of the mask.
The style attribute of <rect> element has the mask ID attribute using the mask CSS property.

Next TopicSVG Tools

SVG Masks

SVG Masks

Example

Explanation

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like