SVG mask Attribute

The SVG mask attribute is used to bind an element in which this attribute is defined to with the given <mask> element. It has effect mostly on the following elements. <a>, <circle>, <clipPath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, and <use>.

Syntax:

mask = Keyword values

or

mask = Image values

or

mask = Global values

Attribute values: The mask attribute can be used with the following elements.

• Keyword values: This attribute value includes values like none.
• Image values: This attribute value uses pixel image or element within SVG graphic used as mask.
• Global values: This attribute value includes values like inherit, initial, and unset.

Example 1:

Output:

Example 2:

Output: