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

This article introduces the relevant knowledge of "how to apply the SVG elements of HTML5". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

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 copy 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 copy 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 copy 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 copy 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 copy code is as follows:

ExampleUse03-'use'witha'transform'attribute

The following figure looks the same as the one above:

The copy code is as follows:

ExampleUse03-'use'witha'transform'attribute

This is the end of the content of "how to use the SVG elements of HTML5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.