HTML5 SVG 2D Introduction 9 - Introduction and Application of Masks and Mask Elements

Author：Eve Cole Update Time：2025-04-07 03:00:03

SVG-supported masks

SVG supports a variety of mask effects. Using these features, we can create many dazzling effects. As for whether mask is called mask or mask in Chinese, it is not differentiated. It is called mask here.

The types of masks supported by SVG:

1. Clipping path

A clipping path is a graph composed of path, text or basic graph. All graphics inside the clip path are visible, and all graphics outside the clip path are invisible.

2. Mask/mask

A mask is a container that defines a set of graphics and uses them as a translucent medium that can be used to combine foreground objects and backgrounds.

An important difference between a clipping path and other masks is that the clipping path is a 1-bit mask, which means that the object covered by the clipping path is either fully transparent (visible, located inside the clipping path) or completely opaque (not visible, located outside the clipping path). And the mask can specify transparency at different locations.

Clipping path of window - overflow and clip properties

The overflow attribute and clip attribute of the HTML element jointly set the clipping behavior of the element to the content. Similarly, in SVG, these 2 properties can also be used.

overflow = visible | hidden | scroll | auto | inherit

The overflow attribute defines the behavior taken when the content of an element exceeds the element's border.

This property can be used for elements (svg, symbol, image, foreignObject), pattern and marker elements that can create new windows. The value of this property is as follows:

visible: Displays all content, even if the content is already outside the border of the element, this is the default value.

hidden: Hide content beyond the clipping path. The clip path is specified by the clip property.

scroll: In the form of a scroll bar, presenting the content beyond it.

auto: Using browser-defined behavior, this seems unreliable.

This property is basically the same as the property of the same name in CSS2, except that in SVG, there are some different processing procedures:

1. The overflow attribute has no effect on elements other than the elements that create a new window (svg, symbol, image, foreignObject), pattern and marker elements.

2. The clipping path corresponds to the window. If a new window is created, a new clipping path is created. The default clipping path is the window boundary.

clip = <shape> | auto | inherit

The clip property is used to set the clip path of the current window.

This property can be used for elements (svg, symbol, image, foreignObject), pattern and marker elements that can create new windows. This property has the same parameters as the property with the same name in CSS2. auto means that the clipping path is consistent with the window border. When using the graph as a parameter (setting the values of top, right, bottom and left of the crop rectangle), the user coordinate value (i.e. coordinates without units) can be used. For example:

P { clip: rect(5px, 10px, 10px, 5px); }

Note here that by default (overflow and clip are both default values), the clip path is consistent with the border of the window. After setting viewBox and preserveAspectRatio, you usually need to map the four sides of the clip clip path into the four sides of the viewBox to ensure that some display effects are the same (of course, if they are all default values, you don't need to set them).

Clipping path to object - clipPath element

The clip path is defined using the clipPath element and then referenced using the clip-path attribute.

clipPath can contain path elements, text elements, basic graphic elements (circle, etc.) and use elements. If it is a use element, it must directly refer to path, text or basic graphic elements, and other elements cannot be referenced.

Note that the clipping path is just a mask layer of one bit, which is a union of all elements contained. Objects in this collection can be displayed, and objects that are not within this range will not be displayed. The algorithm with the specific judgment point not within the range is specified by the clip-rule attribute.

For graphical objects, the clip path is equal to the union of the clip path set by itself with the clip paths of all outer elements (including clip paths set by clip-path and overflow). A few points to note:

1. The clipPath element itself does not inherit the clipPath defined clip path from the outer node.

2. The clipPath element itself can set the clip-path attribute. The effect is the intersection of two paths.

3. The clip-path attribute can be set for the child elements of the clipPath element: the effect is a union of two paths.

4. An empty clipping path will cut all contents in the element.

Here are a few important attributes:

clipPathUnits = userSpaceOnUse ( default ) | objectBoundingBox

This attribute defines the coordinate system used by the clipPath element. We are familiar with these two values, namely the user coordinate system that uses the element that references the current clip path and the bounding box proportional value.

The clipPath element is never rendered directly, and is referenced through clip-path, so setting the display attribute of the clipPath element has no effect.

clip-path = <url( #clipping pathname )> | none inherit

Needless to say, this attribute is used to refer to the clipping path. It should be noted here that all container elements, basic graphics elements and clipPath elements can use this attribute.

clip-rule = nonzero ( default ) | evendd | inherit

This property is used to determine which points belong to the points inside the clipping force. This is easy to judge for simple closed graphics, but for complex graphics with holes inside, there is a difference. The value of this property has the same meaning as the value of fill-rule:

nonzero: The algorithm used for this value is to emit lines from the point to be judged in any direction, and then calculate the direction of the intersection point between the figure and the line segment; the calculation result starts from 0, and every line segment at an intersection is from left to right, add 1; every line segment at an intersection is from right to left, subtract 1; after calculating all intersection points in this way, if the result of this calculation is not equal to 0, the point is in the figure and needs to be filled; if the value is equal to 0, it does not need to be filled outside the figure. See the following example:

Evenodd: The algorithm used for this value is to emit lines from the point that needs to be judged to any direction, and then calculate the number of points at which the figure and the line segment intersection. If the number is odd, the point is changed into the figure and needs to be filled; if the number is even, the point is outside the figure and does not need to be filled. See the example in the figure below:

The clip-rule attribute can only be used for internal graphic elements of the clipPath element. For example, the following settings work:

<g>

</clipPath>

</g>

It does not work if the element is not in clipPath. For example, the following settings do not work:

</clipPath>

</g>

Finally, let’s look at a small example of the clipping path:

<svg>

<g>

</clipPath>

</g>

</svg>

Only the area of the upper left corner of the rectangle is visible.

Mask - mask element

In SVG, you can assign any graphic element or g element as a mask to the rendered object to combine the rendered object into the background.

The mask is defined by the mask element. When using the mask, you only need to reference the mask in the object's mask attribute.

The mask element may contain any graphic element and container element (eg g).

In fact, everyone is clear about the effect of the mask. Basically, it is to calculate a final transparency based on the color and transparency of each point in the mask. Then when rendering the object, a mask layer with different transparency is covered on the object, reflecting the masking effect of the mask. For rendering objects, only the parts inside the mask will be rendered according to the transparency of the points on the mask, and the parts outside the mask will not be displayed. See the following example:

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

<linearGradient id="Gradient" gradientUnits="userSpaceOnUse"

x1="0" y1="0" x2="800" y2="0">

</linearGradient>

<mask id="Mask" maskUnits="userSpaceOnUse"

x="0" y="0">

</mask>

<text id="Text" x="400" y="200"

font-family="Verdana" font-size="100" text-anchor="middle" >

Masked text

</text>

</defs>

<!-- The first step is to draw a Text with a mask, and you can see that the transparency effect of the mask has been applied to the words.

The second step is to draw a Text without a mask as the outline of the Text in the first step -->

</svg>

The effect is shown in the figure below:

You can try to change the width of the rect element in the above mask element to 500. You will see that part of the Text is not displayed, because that part has exceeded the scope of the mask. As you can actually see here, the clipping path above is just a special mask (the transparency of each point is either 0 or 1).

The definition and use of masks have been introduced. Let’s take a look at several important attributes:

maskUnits = userSpaceOnUse | objectBoundingBox (default)

A coordinate system that defines coordinates (x,y) and length (width,height) in a mask element: a user coordinate system that refers to the element of the mask, or a relative value of the bounding box relative to the element of the mask referenced. The meaning of this value is the same as the unit meaning in the previous chapter.

maskContentUnits = userSpaceOnUse (default) | objectBoundingBox

Defines the coordinate system of child elements in the mask element.

x, y, width, height

The position and size of the mask are defined. Under the default objectBoundingBox coordinates, the default values are -10%, -10%, 120%, and 120%.

Also note : the mask will not be rendered directly, it will only work in reference places, so display, opacity and other attributes do not work for mask elements.

Practical reference:

Script index: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Development Center: https://developer.mozilla.org/en/SVG

Popular reference: http://www.chinasvg.com/

Official document: http://www.w3.org/TR/SVG11/