Introduction and Application of HTML5 SVG 2D 9-mengban and mask Elements

Comments: SVG supports a variety of masked effects. With these features, we can make a lot of amazing effects. Do not miss out on special effects. As for the Chinese language, we will not distinguish between mask as "mask" or "mask". It is called mask here. I hope this article will help you.

Masks supported by SVG

SVG supports a variety of masked effects. With these features, we can make a lot of amazing effects. As for the Chinese language, the mask is called "mask" or "mask". It is called mask here.

The following template types are supported by SVG:
1. cliping path)

The crop path is a graph composed of path, text, or basic graph. All images in the cropping path are visible, and all images outside the cropping path are invisible.
2. mask/mask (mask)

A mask is a container that defines a set of graphs and uses them as translucent media to combine foreground objects and backgrounds.
An important difference between the cropping path and other masks is that the cropping path is a one-bit mask, that is, the objects covered by the cropping path are either completely transparent (visible, inside the cropping path ), it is either completely invisible (invisible, outside the cropping path ). The mask can specify the transparency of different positions.

Window cropping path-Overflow and clip attributes

The overflow attribute and clip attribute of an HTML element jointly set the content clipping behavior of the element. Likewise, these two attributes can be used in SVG.

Overflow = visible | hidden | scroll | auto | inherit
The overflow attribute defines the action taken when the content of an element exceeds the border of the element.

This attribute can be used to create elements (svg, symbol, image, foreignObject), pattern, and marker elements in a new window. The value of this attribute is as follows:
Visible: Display All content, even if the content is already outside the border of the element, this is the default value.
Hidden: hides content beyond the cropping path. The cropping path is specified by the clip attribute.
Scroll: displays excessive content in the form of a scroll bar.
Auto: browser-defined behavior, which seems unreliable.
This attribute is basically the same as the same name attribute in CSS2, but there are some different processing procedures in SVG:
1. The overflow attribute has no effect on elements other than the new window (svg, symbol, image, foreignObject), pattern, and marker elements.
2. the crop path corresponds to the window. When a new window is created, a new crop path is created. The default crop path is the window border.
Clip = <shape> | auto | inherit
The clip attribute is used to set the cropping path of the current window.

This attribute can be used to create elements (svg, symbol, image, foreignObject), pattern, and marker elements in a new window. This property has the same parameters as the property with the same name in CSS2. Auto indicates that the cropping path is consistent with the window border. When you use a graph as a parameter (set the top, right, bottom, and left values of the cropped rectangle), you can use the user coordinate value (that is, coordinates without units ). For example:

The Code is as follows:
P {clip: rect (5px, 10px, 10px, 5px );}

Note that by default (both overflow and clip take the default value), the cropping path is consistent with the border of the window. After viewBox and preserveAspectRatio are set, you usually need to map the four sides of the clip cropping path to the four sides of the viewBox to ensure that some of the display effects are the same (if they are all default values, ).

Crop path of an object-clipPath Element
The cropping path is defined by the clipPath element and referenced by the clip-path attribute.
ClipPath can contain path, text, basic graphics elements (circle, etc.), and use elements. If it is a use element, it must be a direct reference of path, text or basic graphic elements, and cannot reference other elements.
Note that the cropping path is only a mask layer, which is the union of all the elements contained in the path. Objects in this set can be displayed. objects not in this range are not displayed. The algorithm with the specific judgment point out of the range is specified by the "clip-rule" attribute.

For graphic objects, the cropping path is the same as the cropping path set by clip-path and overflow. Notes:
1. The clipPath element does not inherit the cropping path defined by clipPath from the outer node.
2. You can set the clip-path attribute for the clipPath element. The result is the intersection of two paths.
3. You can set the clip-path attribute for the child element of the clipPath element. The effect is the union of two paths.
4. The empty cropping path will cut all content in the element.
The following describes several important attributes:
ClipPathUnits = "userSpaceOnUse (Default Value) | ObjectBoundingBox"
This attribute defines the coordinate system used by the clipPath element. We are very familiar with these two values, which are the user coordinate system that references the elements of the current cropping path and the ratio of the surrounding box.
The clipPath element is never directly rendered and is referenced through clip-path. Therefore, setting the display attribute of the clipPath element does not work.
Clip-path = "<url (#Crop path name)> | None inherit"
This attribute can be used to reference the cropping path. It can be used by all container elements, basic graphic elements, and clipPath elements.
Clip-rule = "nonzero (Default Value) | Evenodd | inherit"
This attribute is used to determine which points are inside the cropping path. This is a good decision for a simple closed image, but there is a difference between a complicated internal image with holes. The value of this attribute is the same as that of fill-rule:
Nonzero: The algorithm used for this value is to transmit a line from the point to be determined to any direction, and then calculate the trend at the intersection of the image and the line segment. The calculation result starts from 0, each line segment at the intersection is left to right, and 1 is added; each line segment at the intersection is from right to left, and 1 is subtracted; after all the intersections are calculated, if the calculation result is not equal to 0, the vertex is in the graph and needs to be filled. If the value is equal to 0, the vertex is outside the graph and does not need to be filled. See the following example:

Evenodd: The algorithm used for this value is to transmit a line from the point to be determined to any direction, and then calculate the number of intersection points between the image and the line segment. If the number is an odd number, it is changed to the point in the graph and needs to be filled; if the number is an even number, the point is placed outside the graph and does not need to be filled. Example:

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

The Code is as follows:
<G>
<ClipPath id = "MyClip">
<Path d = "..." clip-rule = "evenodd"/>
</ClipPath>
<Rect clip-path = "url (# MyClip)".../>
</G>

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

The Code is as follows:
<G clip-rule = "nonzero">
<ClipPath id = "MyClip">
<Path d = "..."/>
</ClipPath>
<Rect clip-path = "url (# MyClip)" clip-rule = "evenodd".../>
</G>

Finally, let's look at a small example of the cropping path:

The Code is as follows:
<Svg width = "100px" height = "100px">
<G>
<ClipPath id = "MyClip">
<Path d = "M 10, 10 L 10, 20 L 20, 20 L 20, 10 Z" clip-rule = "evenodd"/>
</ClipPath>
</G>
<Rect clip-path = "url (# MyClip)" x = "10" y = "10" width = "80" height = "80" fill = "Red"/>
</Svg>

Only the area 10*10 in the upper left corner of the rectangle is visible.

Mask-mask Element
In SVG, you can specify any graphic element or g element as the mask for 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 mask attribute of the object.
The mask element can contain any graphical element and container element (such as g ).
In fact, the effect of the mask is quite clear, basically it is to calculate a final transparency based on the color and transparency of each vertex in the mask, and then when rendering the object, the mask layer with different transparency on the face mask of the object reflects the mask effect. For the rendered object, only the part in the mask is rendered based on the transparency of the vertices on the mask. The part not in the mask is not displayed. See the following example:

The Code is as follows:
<Svg width = "8 cm" height = "3 cm" viewBox = "0 0 800 300" version = "1.1"
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">
<Stop offset = "0" stop-color = "white" stop-opacity = "0"/>
<Stop offset = "1" stop-color = "white" stop-opacity = "1"/>
</LinearGradient>
<Mask id = "Mask" maskUnits = "userSpaceOnUse"
X = "0" y = "0" width = "800" height = "300">
<Rect x = "0" y = "0" width = "800" height = "300" fill = "url (# Gradient)"/>
</Mask>
<Text id = "Text" x = "400" y = "200"
Font-family = "Verdana" font-size = "100" text-anchor = "middle">
Masked text
</Text>
</Defs>
<! -- Windows Background -->
<Rect x = "0" y = "0" width = "800" height = "300" fill = "# FF8080"/>

<! -- The first step is to draw a Text with a mask. You can see that the transparency of the mask has been applied to the word.
The second step is to draw a Text without mask to serve as the profile of the First Step Text -->
<Use xlink: href = "# Text" fill = "blue" mask = "url (# Mask)"/>
<Use xlink: href = "# Text" fill = "none" stroke = "black" stroke-width = "2"/>
</Svg>

Shows the effect:

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 is out of the masked range. We can see that the cropping path above is only a special mask (the transparency of each vertex is either 0 or 1 ).
The definition and use of the mask have been introduced. The following describes several important attributes:
MaskUnits = "userSpaceOnUse | objectBoundingBox (default )"
Defines the coordinate system of coordinates (x, y) and length (width, height) in the mask element: Use the user coordinate system that references the element of the mask, or use the relative value of the surrounding box relative to the element that references the mask. The meaning of this value is the same as that in the previous chapter.
MaskContentUnits = "userSpaceOnUse (default) | objectBoundingBox"
Defines the coordinate system of the child element of the mask element.
X, y, width, height
Defines the position and size of the mask. Under the default objectBoundingBox coordinate, the default values are-10%,-10%, 120%, and 120%, respectively.

Note that: The mask will not be rendered directly, but will only work in the referenced place. Therefore, attributes such as display and opacity do not work for the mask element.

Practical reference:
Script Index: http://msdn.microsoft.com/zh-cn/library/ff971910 (v = vs.85). aspx
Development Center: https://developer.mozilla.org/en/SVG
Hot reference: http://www.chinasvg.com/
Official documents: http://www.w3.org/TR/SVG11/