HTML5 SVG 2D entry 7-SVG Element reuse and reference

Comments: I have introduced many graphic elements. If many images are the same, do you need to define a new one every time? Can we reuse some images? This is the focus of this section: the reuse of SVG elements. If you are interested, you can understand it. It may be helpful for you to introduce many graphic elements, if many images are the same, do you need to define a new one every time? Can we share some images? This section focuses on the reuse of SVG elements.

Combination-g Element
The g element is a container that combines a set of related graphic elements to form a whole. In this way, we can perform operations on this whole. This element can usually be used with the desc and title elements to provide the structure information of the document. Documents with good structure are usually readable and rendering efficient. Let's look at a small example:

The Code is as follows:
<Svgxmlns = "http://www.w3.org/2000/svg"
Version = "1.1" width = "5 cm" height = "5 cm">
<Desc> Twogroups, eachoftworectangles </desc>
<Gid = "group1" fill = "red">
<Rectx = "1 cm" y = "1 cm" width = "1 cm" height = "1 cm"/>
<Rectx = "3 cm" y = "1 cm" width = "1 cm" height = "1 cm"/>
</G>
<Gid = "group2" fill = "blue">
<Rectx = "1 cm" y = "3 cm" width = "1 cm" height = "1 cm"/>
<Rectx = "3 cm" y = "3 cm" width = "1 cm" height = "1 cm"/>
</G>
<! -- Showoutlineofcanvasusing 'rect' element -->
<Rectx = ". 01 cm" y = ". 01 cm" width = "4.98 cm" height = "4.98 cm"
Fill = "none" stroke = "blue" stroke-width = ". 02 cm"/>
</Svg>

Notes:
1. xmlns = "http://www.w3.org/2000/svg" indicates that the default namespace of the entire svg element is svg. This can be omitted without ambiguity. Because 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 and provide an alias for the namespace.
2.g elements can be nested.
3. the combined graphic element is the same as a single element and can be assigned an id value. In this way, you only need to reference this id value when necessary (such as animation and reuse of a group of elements.
4. Combining a set of graphic elements allows you to set the relevant attributes (such as fill, stroke, and transform) of these elements. This is also a scenario of combination.

Template-symbol Element
The symbol element is used to define a graphic template (a template can contain many images). This template can be instantiated by the use element. The functions of a template are similar to those of g elements. They both provide a set of graphical objects, but there are also some differences. What is different from g element is:
1. the symbol element itself will not be rendered, and only the instances of the symbol template will be rendered.
2. the symbol element can have attributes viewBox and preserveAspectRatio, which allow the symbol to zoom in the graphic element.

From the rendering perspective, elements similar to the symbol element are marker (define arrow and label) and pattern (define color) elements, which are not rendered directly; their usage is basically instantiated by the use element. It is for this reason that the 'display' attribute is meaningless for symbol.
The modified code below shows how to use the symbol:

The Code is as follows:
<Svgxmlns = "http://www.w3.org/2000/svg"
Xmlns: xlink = "http://www.w3.org/1999/xlink"
Version = "1.1" width = "5 cm" height = "5 cm">
<Desc> Twogroups, eachoftworectangles </desc>
<Symbolid = "group1" fill = "red">
<Rectx = "1 cm" y = "1 cm" width = "1 cm" height = "1 cm"/>
<Rectx = "3 cm" y = "1 cm" width = "1 cm" height = "1 cm"/>
</Symbol>
<Gid = "group2" fill = "blue">
<Rectx = "1 cm" y = "3 cm" width = "1 cm" height = "1 cm"/>
<Rectx = "3 cm" y = "3 cm" width = "1 cm" height = "1 cm"/>
</G>
<Usexlink: href = "# group1" target = "_ blank" rel = "nofollow">
<! -- Showoutlineofcanvasusing 'rect' element -->
<Rectx = ". 02 cm" y = ". 02 cm" width = "4.96 cm" height = "4.96 cm"
Fill = "none" stroke = "blue" stroke-width = ". 02 cm"/>
</Svg>

Definition-defs Element
SVG allows you to define a group of objects and reuse them (note, not just graphical objects ). The most common example is to define gradient and then assign the fill attribute to other graphic objects. This type of object is not rendered when gradient is defined, so it can be placed anywhere. Reuse often exists in graphic objects, and we do not want to render it directly when defining it. Instead, we want to render it in the referenced place. This can be implemented using the defs element.

Generally, we recommend that you put the referenced object in the defs element whenever possible. These objects are generally altGlyphDef, clipPath, cursor, filter, marker, mask, pattern, linearGradient, radialGradient, symbol, and graphic objects. Defining these objects in the defs element is easy to understand, so the accessibility is improved.

In fact, the g elements, symbol elements, and defs elements of the container object provide the function of reuse to varying degrees, except that each element may have slightly different features: for example, g elements are directly rendered, symbol and defs are not directly rendered. symbol contains the viewBox attribute and creates a new window.

Generally, the id attribute is assigned to the elements defined in defs and used directly. Based on different elements, these definitions can be used in different places. For example, the following progressive colors are used as attributes:

The Code is as follows:
<Svgwidth = "8 cm" height = "3 cm"
Xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Desc> LocalURIreferenceswithinancestor's 'defs' element. </desc>
<Defs>
<LinearGradientid = "Gradient01">
<Stopoffset = "20%" stop-color = "# 39F"/>
<Stopoffset= "90%" stop-color = "# F3F"/>
</LinearGradient>
</Defs>
<Rectx = "1 cm" y = "1 cm" width = "6 cm" height = "1 cm"
Fill = "url (# Gradient01)"/>
</Svg>

You can use the use element to link the definition of graphic-related elements to a document. For example:

The Code is as follows:
<Svgwidth = "10 cm" height = "3 cm" viewBox = "0010030" version = "1.1"
Xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<Desc> ExampleUse01-Simplecaseof 'use 'ona' rect' </desc>
<Defs>
<Rectid = "MyRect" width = "60" height = "10"/>
</Defs>
<Rectx = ". 1" y = ". 1" width = "99.8" height = "29.8"
Fill = "none" stroke = "blue" stroke-width = ". 2"/>
<Usex = "20" y = "10" xlink: href = "# MyRect"/>
</Svg>

Pay attention to the use of xlink namespace. Although most viewers do not correctly display this item, the xlink namespace should be defined on the <svg> </svg> element to ensure consistency.

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

The process of using elements is equivalent to copying the referenced objects to 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 essentially a DOM node. Therefore, all attribute values, animations, events, and CSS settings of the referenced object will be copied and used, these nodes also inherit the attributes of the use element and the use ancestor (note that the referenced element is a deep copy, and these copied elements have no relationship with the original element, therefore, the attributes of the referenced element's ancestor node will not be inherited here. If these nodes have relevant (CSS) attributes, the inherited attributes will also be overwritten, these are the same as common DOM nodes, so be careful when using "visibility: hidden" for the use element. However, because these nodes are not public, you can only view the use element in DOM operations, so you can only operate on the use element.

From the perspective of visual effects, the use element is more like a placeholder. After rendering, the visual effects are the same as those directly rendered with the referenced object:
1. The use element references a symbol element.
In this case, the visual effect is equivalent:
(1) Replace the use element with the g element;
(2) Move all the attributes except x, y, width, height, xlink: href of use to the g element;
(3) convert the x and y attributes of use to translate (x, y), and append them to the end of the transform attribute of the g element;
(4) Replace the referenced symbol element with the svg element. the svg Element explicitly uses the width and height attributes of the use element (100% if the use element does not have these attributes );
(5) copy the image content of the referenced symbol element to the replaced svg.
2. The use element references an svg element.
In this case, the visual effect is equivalent:
(1) Replace the use element with the g element;
(2) Move all the attributes except x, y, width, height, xlink: href of use to the g element;
(3) convert the x and 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 referenced svg Element including the content. the svg Element explicitly uses the width and height attributes of the use element (the original value is used if the use element does not have these attributes );
3. Other cases
In these cases, the visual effect is equivalent:
(1) Replace the use element with the g element;
(2) Move all the attributes except x, y, width, height, xlink: href of use to the g element;
(3) convert the x and 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 referenced element;
See the visual effect of the following example.:

The Code is as follows:
<Svgwidth = "10 cm" height = "3 cm" viewBox = "0010030" version = "1.1"
Xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<Desc> ExampleUse03-'Use 'witha' transform' attribute </desc>
<Defs>
<Rectid = "MyRect" x = "0" y = "0" width = "60" height = "10"/>
</Defs>
<Rectx = ". 1" y = ". 1" width = "99.8" height = "29.8"
Fill = "none" stroke = "blue" stroke-width = ". 2"/>
<Usexlink: href = "# MyRect"
Transform = "translate (20, 2.5) rotate (10)"/>
</Svg>

The figure below looks the same as the figure above:

The Code is as follows:
<Svgwidth = "10 cm" height = "3 cm" viewBox = "0010030"
Xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Desc> ExampleUse03-'Use 'witha' transform' attribute </desc>
<Rectx = ". 1" y = ". 1" width = "99.8" height = "29.8"
Fill = "none" stroke = "blue" stroke-width = ". 2"/>
<Gtransform = "translate (20, 2.5) rotate (10)">
<Rectx = "0" y = "0" width = "60" height = "10"/>
</G>
</Svg>

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/