Introduction to SVG 2D in HTML5 8—Summary of document structure and related elements_html5 tutorial skills

Many basic elements have been introduced before, including structure-related combinations and reuse elements. Here we will briefly summarize the remaining relevant elements in the document structure of SVG, and then move forward to appreciate other features of SVG.
The elements of SVG documents can basically be divided into the following categories:
•Animation elements: animate, animateColor, animateMotion, animateTransform, set;
•Explanation elements: desc, metadata, title;
•Graphics Elements: circle, ellipse, line, path, polygon, polyline, rect;
• Structural elements: defs, g, svg, symbol, use;
• Gradient elements: linearGradient, radialGradient;
• Other elements ：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view, etc.
Among them, graphic elements, gradient elements, text, image elements and combinations have all been introduced. Here are several other elements related to structure.

View-svg element
You can place any other elements in any order within the svg element, including nested svg elements.
The commonly used attributes supported by the svg element are id, class, x, y, width, height, viewBox, preserveAspectRatio, and related attributes of fill and stroke.
The events supported by the svg element are also commonly used onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload, etc. Not much to say about the svg element. For a complete list of attributes and events, please refer to the official documentation later.

Explanatory elements-desc element and title element
Each container element (an element that can contain other container elements or graphic elements, such as: a, defs, glyph, g, Marker, mask, missing-glyph, pattern, svg, switch and symbol) and graphic elements can contain desc and title elements, both of which are auxiliary elements used to explain related situations; their contents are text . When the SVG document is rendered, these two elements will not be rendered into the graphic. The difference between these two elements is not too big. In some implementations, title appears as prompt information, so title is usually placed in the first position of the parent element.
Typical usage is as follows:

Copy code

The code is as follows:

< ;svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="4in"height="3in">