HTML5 SVG 2D Introduction 7—Reuse and Reference of SVG Elements_html5 tutorial skills

We introduced a lot of graphic elements earlier. If many graphics themselves are the same, do we 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.

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

Copy the code

The code is as follows:

version="1.1"width="5cm"height="5cm">
Twogroups,eachoftworectangles









fill="none"stroke="blue" stroke-width=".02cm"/>

Note a few points:
1.xmlns="http://www.w3.org/2000/svg" indicates that the default namespace of the entire svg element is svg. This can be omitted when there is no ambiguity. Since the svg document is an XML document, the relevant rules of the XML namespace are applicable here. For example, you can specify a namespace for svg display, provide an alias for the namespace, etc.
2.g elements can be nested.
3. The combined graphic elements can be given an id value just like a single element. In this way, when needed (such as animation and reuse of a group of elements), you only need to reference this id value.
4. Combining a group of graphic elements can uniformly set the related attributes of this group of elements (fill, stroke, transform, etc.). This is also a scenario where combination is used.

Template-symbol element
symbol element is used to define a graphic template (the template can contain many graphics). This template can be instantiated by the use element. The function of the template is very similar to that of the g element. They both provide a set of graphic objects, but there are some differences. The difference from the g element is:
1. The symbol element itself will not be rendered, only instances of the symbol template will be rendered.
2. The symbol element can have the attributes viewBox and preserveAspectRatio, which allow the symbol to scale the graphic element.

From a rendering perspective, elements similar to the symbol element are marker (defining arrows and labels) and pattern (defining colors) elements; these elements are not directly rendered; their usage is basically use element to instantiate. For this reason, the 'display' attribute is meaningless for symbols.
The following modified code shows how to use symbol:

Copy the code

The code is as follows:

xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"width="5cm"height="5cm">
Twogroups,eachoftworectangles










fill="none"stroke="blue"stroke-width=".02cm"/>

define-defs element
SVG allows you to define a set of objects and then reuse this set of objects (note, not just graphic objects). The most common example is to define a gradient color and then assign it to the fill attribute in other graphics objects. Gradient colors are not rendered when defined, so objects of this type can be placed anywhere. Reuse often exists in graphics objects, and we don't want to render directly when defining, but want to render at the referenced place. This can be achieved using the defs element.

Generally, the recommended approach is to put referenced objects in defs elements whenever possible. These objects are usually: altGlyphDef, clipPath, cursor, filter, marker, mask, pattern, linearGradient, radialGradient, symbol and graphic objects, etc. Defining these objects in defs elements makes them easier to understand, thus improving accessibility.

In fact, the g element, symbol element, and defs element as container objects all provide reuse functions to varying degrees, but the characteristics of each element may be slightly different: for example, the g element is directly rendered, symbol and defs will not be rendered directly. The symbol contains the viewBox attribute and a new view window will be created.

Usually the id attribute is assigned to the elements defined in defs and used directly where used. Depending on the element, these definitions can be used in different places. For example, the following progressive color is used as an attribute:

Copy code

The code is as follows:

xmlns="http://www.w3.org/2000/svg"version=" 1.1">
LocalURIreferenceswithinancestor's'defs'element.





fill="url(#Gradient01)"/>

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

Copy code

The code is as follows:

xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/ 1999/xlink">
ExampleUse01-Simplecaseof'use'ona'rect'



fill="none "stroke="blue"stroke-width=".2"/>

Please note the use of xlink namespace here. Although most viewers will display this correctly without it, for consistency the xlink namespace should be defined on the element.

Reference-use element
Any svg, symbol, g, single graphic element and use element can essentially be referenced by use elements as template objects (such as initialization). The graphics content referenced by use will be rendered at the specified location. Unlike the image element, the use element cannot reference the entire document. The
use element also has x, y, width and height attributes. These attributes can be omitted. If they are not omitted, the coordinates or length of the referenced graphic content will be mapped to the current user coordinate space. The function of the

use element is equivalent to deep copying the referenced object into an independent non-public DOM tree; the parent node of this tree is the use element. Although it is a non-public DOM node, it is still a DOM node in essence, so all attribute values, animations, events, CSS related settings, etc. of the referenced object will be copied and will still work, and these nodes will also inherit use Relevant attributes of the element and use ancestors (note that the referenced elements are deep copies. These copied elements have nothing to do with the original elements, so the attributes of the ancestor nodes of the referenced elements will not be inherited here). If these nodes themselves are related ( CSS) properties, and will also override inherited properties. These are consistent with ordinary DOM nodes, so be careful when using "visibility:hidden" on use elements, as it may not necessarily work. However, since this part of the nodes is not public, only the use element can be seen during DOM operations, so only the use element can be operated.

From a visual effect point of view, the use element is more like a placeholder. The visual effect after rendering is the same as rendering directly with the referenced object:
1.use element reference A symbol element
In this case, the visual effect is equivalent to:
(1) Replace the use element with the g element;
(2) Divide use by x, y, width, height, )Replace the referenced symbol element with an svg element. This svg element will explicitly use the width and height attributes of the use element (the use element without these attributes will be 100%);
(5) Change the graphic of the referenced symbol element The content is deep copied into the replaced svg.

2. The use element refers to an svg element
In this case, the visual effect is equivalent to: (1) Replace the use element with the g element;
(2 ) Move all the attributes of use except x, y, width, height, xlink:href to the g element;
(3) Change the x, y attributes of use into translate(x, y) and append to g The transform attribute of the element is last;
(4) Copy the referenced svg element including the content. This svg element will explicitly use the width and height attributes of the use element (the use element will use the original values ​​if it does not have these attributes);

3. Other situations
The visual effect in these cases is equivalent to: (1) Replace the use element with the g element;
(2) Divide use by x , y, width, height, xlink: All attributes other than href are moved to the g element;
(3) Change the x, y attributes of use to translate(x, y), and append them to the end of the transform attribute of the g element;
(4) Copy the reference element;

Look at the visual effect of the example below
:

Copy codeThe code is as follows:

xmlns="http:/ /www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">
ExampleUse03-'use'witha'transform'attribute< /desc>


fill="none"stroke="blue"stroke-width=".2"/ >
transform="translate(20,2.5)rotate(10)"/>