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

This article is to share with you about how the SVG element in HTML5 is reused and quoted, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article, without saying much, follow the editor to have a look.

A lot of graphic elements have been introduced earlier. If many graphics are the same, do you need to define a new one every time? Can we share some graphics? This is the focus of this section-the reuse of SVG elements.

Combination-g element

The g element is a container that combines a set of related graphical elements into a whole; in this way, we can operate on the whole. This element can usually be used in conjunction with desc and title elements to provide structural information about the document. Well-structured documents are usually readable and render efficiently. Look at a small example:

The code is as follows:

Twogroups,eachoftworectangles

Note a few points:

1.xmlns = "http://www.w3.org/2000/svg" indicates that the default namespace for the entire svg element is svg. This can be omitted when there is no ambiguity. Here, because the svg document is an XML document, the rules of the XML namespace apply here. For example, you can specify a namespace for the svg display, provide an alias for the namespace, and so on.

2.g elements can be nested.

3. Combined graphical elements, like individual elements, can be given an id value so that you only need to reference that id value when needed (such as animation and reuse of a set of elements).

4. Combining a set of graphic elements allows you to uniformly set the relevant attributes of this set of elements (fill,stroke,transform, etc.), which is also a scenario for using combinations.

Template-symbol element

The symbol element is used to define a drawing template (a template can contain many graphics), which can be instantiated by the use element. The function of a template is very similar to that of the g element, providing a set of graphical objects, but there are some differences. Unlike the g element, it is:

The 1.symbol element itself will not be rendered, only instances of the symbol template will be rendered.

2.symbol elements can have attributes viewBox and preserveAspectRatio, which allow symbol to scale graphic elements.

From a rendering perspective, elements similar to symbol elements are marker (define arrows and labels) and pattern (define color) elements; these elements are not directly rendered; they are basically used by the use element to instantiate. For this reason, the 'display' attribute is meaningless to symbol.

The following modified code shows how symbol is used:

The code is as follows:

Twogroups,eachoftworectangles

Define-defs element

SVG allows you to define a set of objects and then reuse them (note that it's not just graphical objects). The most common examples are defining gradients and then assigning them to the fill property in other graphic objects. Gradients are defined without rendering, so objects of this type can be placed anywhere. Reuse is also common in graphic objects, and we don't want to render directly when we define it, but we want to render it where it is referenced, which can be achieved with the defs element.

In general, the recommended practice is to put the referenced object in the defs element whenever possible. These objects are usually: altGlyphDef,clipPath,cursor,filter,marker,mask,pattern,linearGradient,radialGradient,symbol and drawing objects, etc. Defining these objects in defs elements is easy to understand, so accessibility is improved.

In fact, g element, symbol element and defs element as container objects provide reuse to varying degrees, but the characteristics of each element may be slightly different: for example, g element is directly rendered, symbol and defs do not render directly, and symbol contains the viewBox attribute, which creates a new window.

Elements defined in defs are usually assigned an id attribute and used directly where they are used. Depending on the element, these definitions can be used in different ways, such as the following gradient color as an attribute:

The code is as follows:

LocalURIreferenceswithinancestor's'defs'element.

Definitions of graphic-related elements can be linked to the document using the use element. For example:

The code is as follows:

ExampleUse01-Simplecaseof'use'ona'rect'

Note the use of xlink namespaces here. Although most viewers will display this item correctly without it, for consistency, xlink namespaces should be defined on elements.

Reference-use element

Any svg,symbol,g, individual graphical elements, and use elements can essentially be referenced by use elements as template objects (such as initialization). The drawing content referenced by use is rendered at the specified location. Unlike the image element, the use element cannot refer to the entire document.

The use element also has the xdepartment width and height attributes, which can be omitted. If not, the referenced graphic content coordinates or length will be mapped to the current user coordinate space.

The use element works like a deep copy of the referenced object into a separate, private DOM tree; the parent node of this tree is the use element. Although it is a private DOM node, it is essentially a DOM node, so all attribute values, animations, events, CSS-related settings of the referenced object will be copied and will still work, and these nodes will also inherit the relevant attributes of use elements and use ancestors. (note that the referenced elements are deep copies, and these copied elements have nothing to do with the original elements. So here will not inherit the attributes of the ancestor node of the referenced element), if these nodes themselves have related (CSS) attributes, they will also overwrite the inherited attributes, which are consistent with normal DOM nodes, so be careful when using "visibility:hidden" on use elements, it does not necessarily work. However, because this part of the node is not public, you can only see the use element in the DOM operation, so you can only operate on the use element.

Visually, the use element is more like a placeholder, and the visual effect after rendering is the same as rendering directly with the referenced object:

The 1.use element refers to a symbol element

In this case, the visual effect is equivalent to:

(1) replace use element with g element

(2) move all the attributes of use to the g element except xref.

(3) change the x _ transform attribute of use to translate (x ~ ~ y), and append it to the end of the g element's xpene attribute.

(4) replace the referenced symbol element with the svg element, which explicitly uses the width and height attributes of the use element (without these attributes, the use element is 100%).

(5) deeply copy the graphic contents of the referenced symbol element into the replacement svg.

The 2.use element refers to a svg element

In this case, the visual effect is equivalent to:

(1) replace use element with g element

(2) move all the attributes of use to the g element except xref.

(3) change the x _ transform attribute of use to translate (x ~ ~ y), and append it to the end of the g element's xpene attribute.

(4) copy the referenced svg element, including the content, and this svg element explicitly uses the width and height attributes of the use element (if the use element does not have these attributes, it uses the original value)

3. Other circumstances

The visual effect in these cases is equivalent to:

(1) replace use element with g element

(2) move all the attributes of use to the g element except xref.

(3) change the x _ transform attribute of use to translate (x ~ ~ y), and append it to the end of the g element's xpene attribute.

(4) copy the reference elements.

Look at the visual effects of the following example:

The code is as follows:

ExampleUse03-'use'witha'transform'attribute

The following figure looks the same as the one above:

The code is as follows:

ExampleUse03-'use'witha'transform'attribute

This is how the SVG elements in HTML5 are reused and referenced. The editor believes that there are some knowledge points that we may see or use 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.