Shulou(Shulou.com)06/03 Report--

This article to share with you is about HTML5 SVG mask and mask element introduction and application is how, Xiaobian think quite practical, so share to everyone to learn, I hope you can read this article after harvest, not much to say, follow Xiaobian to see it.

SVG supported masks

SVG supports a variety of masking effects, and with these features, we can make a lot of cool effects. As for whether mask is called "mask" or "mask" in Chinese, it is not distinguished. Here, it is called mask.

SVG supported mask types:

1. clipping path

A clipping path is a graph consisting of path, text, or basic graphs. All graphics within the clipping path are visible, and all graphics outside the clipping path are invisible.

2. Mask/mask

A mask is a container that defines a set of shapes 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 objects covered by the clipping path are either fully transparent (visible, inside the clipping path) or fully opaque (invisible, outside the clipping path). The mask can specify transparency at different positions.

Clip path for windows- overflow and clip properties

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

overflow = visible | hidden | scroll | auto | inherit

The overflow attribute defines the behavior to take when the content of an element exceeds the element's bounding box.

This attribute can be used on elements that create new windows (svg,symbol,image,foreignObject),pattern and marker elements. The value of this property means:

visible: Displays all content, even if the content is already outside the element's border. This is the default.

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

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

auto: Uses browser-defined behavior, which 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:

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

2. Clipping paths correspond to windows, and when a new window is created, a new clipping path is created. The default clipping path is the window boundary.

clip = | auto | inherit

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

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

The code is as follows:

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

Note here that by default (overflow and clip defaults), the clipping path is consistent with the window's border. When viewBox and preserveAspectRatio are set, it is usually necessary to map the four sides of the clip clipping path to the four sides of viewBox, so as to ensure that some display effects are still the same (of course, if they are all default values, they do not need to be set).

Clipping path of object- clipPath element

Clip paths are defined using the clipPath element and then referenced using the clip-path attribute.

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

Note that the clipping path is only a one-bit mask layer, the path is the union of all the elements contained in. Objects in this collection can be displayed, and objects outside this range are not displayed. The algorithm for determining whether a specific point is in range or not is specified by the "clip-rule" attribute.

For graphic objects, the clipping path is equal to the union of the clipping path of its clip-path setting and the clipping paths of all outer elements, including the clipping paths of its clip-path and overflow settings. Note a few points:

The clipPath element itself does not inherit the clipping path defined by clipPath from the outer node.

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

The child element of the clipPath element can set the clip-path attribute: the effect is the union of two paths.

4. An empty clipping path will clip everything inside the element.

Here are a few important attributes:

clipPathUnits = "userSpaceOnUse(default)| objectBoundingBox"

This property defines the coordinate system used by the clipPath element. These two values are familiar to us: the user coordinate system of the element that references the current clipping path and the bounding box scale value.

The clipPath element is never rendered directly, it is always referenced via clip-path, so setting the display property of the clipPath element has no effect.

clip-path = " | none inherit"

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

clip-rule = "nonzero(default)| evenodd | inherit"

This attribute is used to determine which points are inside the clip path. For simple closed figures, this is easy to determine, but for complex figures with holes in the interior, 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: From the point to be determined to emit a line in any direction, and then calculate the trend of the intersection of the graph and the line segment; the calculation result starts from 0, and each line segment at the intersection is from left to right, plus 1; each line segment at the intersection is from right to left, minus 1; after all intersections are calculated, if the result of this calculation is not equal to 0, then the point is inside the graph and needs to be filled; if the value is equal to 0, then outside the graph, no filling is needed. Consider the following example:

evenodd: The algorithm used for this value is to emit lines from the points to be determined to any direction, and then calculate the number of intersections between the graph and the line segment. If the number is odd, the points are changed to be inside the graph and need to be filled; if the number is even, the points are outside the graph and do not need to be filled. Take a look at the following example:

The clip-rule attribute can only be used with the inner graphic elements of the clipPath element. For example, the following settings are active:

The code is as follows:

It doesn't work if the element isn't in the clipPath. For example, the following settings do not work:

The code is as follows:

Finally, a small example of a clipping path:

The code is as follows:

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

mask element

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

Mask is defined by mask element. When using mask, you only need to refer to mask in mask attribute of object.

The mask element can contain any graphic element and container element (for example g).

The effect of the mask is actually relatively clear to everyone, basically calculating a final transparency according to the color and transparency of each point in the mask, and then when rendering the object, mask the mask layer with different transparency on the object to reflect the occlusion effect of the mask. For rendered objects, only the parts that are inside the mask are rendered according to the transparency of the points on the mask, and the parts that are not inside the mask are not displayed. Consider the following example:

The code is as follows:

Masked text

The effect is shown below:

You can try changing the width of the rect element in the mask element above to 500, and you will see that part of Text is not displayed, which is because that part is beyond the scope of the mask. As you can see here, the clipping path above is nothing more than a special mask (the transparency of each point is either 0 or 1).

The definition and use of the mask has been introduced, here are a few important attributes:

maskUnits = "userSpaceOnUse |objectBoundingBox(default)"

Defines the coordinate system of coordinates (x,y) and length (width,height) in mask elements: using the user coordinate system of the element referencing the mask, or using relative values relative to the bounding box of the element referencing the mask. This value has the same meaning as the units in the previous section.

maskContentUnits = "userSpaceOnUse(default)| objectBoundingBox"

Defines the coordinate system of the subelements of the mask element.

x, y, width, height

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

Note also that masks do not render directly, they only work where they are referenced, so attributes such as display and opacity do not work for mask elements.

The above is how SVG mask and mask elements in HTML5 are introduced and applied. Xiaobian believes that some knowledge points may be seen or used in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.