Introduction to SVG 2D in HTML5 8-document structure and related elements

Comments: I have introduced many basic elements, including structure-related combinations and reuse elements. Here I will briefly summarize the remaining elements in the SVG document structure, if you are interested, do not miss it. Then, continue to learn about the other features of SVG. We have introduced many basic elements, including the combination and reuse elements related to the structure, here, we will briefly summarize the remaining elements in the SVG document structure, and then continue to appreciate other SVG features.
The elements of SVG documents can be divided into the following types:
• Animation elements: animate, animateColor, animateMotion, animateTransform, set;
• Interpretation elements: desc, metadata, title;
• Graphic elements: circle, ellipse, line, path, polygon, polyline, rect;
• Structural Elements: defs, g, svg, symbol, use;
• Gradient elements: linearGradient and radialGradient;
• Other elements: a, altGlyphDef, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, text, view, etc.
The graphic elements, gradient elements, text, image elements, and combinations are introduced. The following describes several other elements related to the structure.

Windows-svg elements
Any other elements, including nested svg elements, can be placed in any order in svg elements.
Common attributes supported by svg elements include id, class, x, y, width, height, viewBox, preserveAspectRatio, and related attributes of fill and stroke.
Events supported by svg elements are also commonly used, such as onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, and onunload. The svg element is not much said. For the complete attribute and event list, refer to the official document below.

Explanatory elements-desc and title Elements
Each container element (can contain other container elements or graphic elements, such as a, defs, glyph, g, marker, mask, missing-glyph, pattern, svg, both the switch and symbol elements can contain the desc and title elements. These elements are auxiliary elements used to explain the situation. Their content is text. When an SVG document is rendered, the two elements are not rendered into the image. The difference between the two elements is not too big. In some implementations, the title appears as a prompt message. Therefore, the title is usually placed at the first position of the parent element.
The typical usage is as follows:

The Code is as follows:
<Svgxmlns = "http://www.w3.org/2000/svg" version = "1.1" width = "4in" height = "3in">
<G>
<Title> Companysalesbyregion </title>
<Desc>
Thisisabarchartwhichshows
Companysalesbyregion.
</Desc>
<! -- Barchartdefinedasvectordata -->
</G>
</Svg>

Generally, the svg element on the outermost layer must be configured with a title to indicate that the program is more readable.

Mark-marker Element
Markup defines graphical elements (arrows and multi-point markup) attached to one or more vertices (path, line, polyline, or polygon vertices ). An arrow can be appended to the start or end point of a path, line, or polyline. A multi-point tag can be attached to all vertices of path, line, polyline, or polygon.

The tag is defined by the marker element, and then related attributes (marker, marker-start, marker-mid, and marker-end) are set in path, line, polyline, or polygon) you can. Let's look at an example:

The Code is as follows:
<Svgwidth = "4in" height = "2in"
ViewBox = "0040002000" version = "1.1"
Xmlns = "http://www.w3.org/2000/svg">
<Defs>
<Markerid = "Triangle"
ViewBox = "001010" refX = "0" refY = "5"
MarkerUnits = "strokeWidth"
MarkerWidth = "4" markerHeight = "3"
Orient = "auto">
<Pathd = "M00L105L010z"/>
</Marker>
</Defs>
<Desc> Placinganarrowheadattheendofapath.
</Desc>
<Pathd = "M1000750L2000750L25001250"
Fill = "none" stroke = "black" stroke-width = "100"
Marker-end = "url (# Triangle)"/>
</Svg>

The following describes the knowledge of marker in detail.:
1. marker is a container element that can store graphic elements, container elements, animations, and gradient elements in any order.
2. The marker element can create a new window: set the value of viewBox.
3. Important attributes of marker:
MarkerUnits = "strokeWidth | userSpaceOnUse"
This attribute defines the coordinate system used by the attributes markerWidth, markerHeight, and marker. This attribute has two optional values. The first value strokeWidth is the default value, which indicates the property markerWidth, the unit of the coordinate system used for the content of markerHeight and marker is equal to the value set by stroke-width that references the graphic element of this marker.

For example, in the preceding example, the width and height of the marker element are 400, but do not confuse them. The path in the mark element uses the coordinates of the new user coordinate system set in viewBox.
Another value of this attribute is userSpaceOnUse, which indicates the coordinate system of the graphic elements that reference this markerWidth, markerHeight, and marker.
RefX, refY: defines the coordinates of the referenced point and the position alignment of marker. For example, in the above example, the referenced point is the end point and must be aligned to the () position of marker. Note refX: refY uses the final user coordinate system transformed by viewBox.
MarkerWidth, markerHeight: width and height of the marker window, which is easy to understand.
Orient: defines the angle of rotation of marker. You can specify an angle or assign a value to auto.
Auto indicates rotation in the positive direction of the X axis according to the following rules::
A. If the point where the marker is located belongs to only one path, the x-axis of the marker is the same as that of the path. See the example above.
B. If the point where the marker is located belongs to two different paths, the positive direction of the X axis of the marker is consistent with that of the angle of the two paths.
4. The marker attribute of the Graphic Element

To reference a marker as a graphic element, you need to use related attributes, mainly including the three: marker-start (place the referenced marker to the start point ), marker-mid (place the referenced marker to all vertices except the start and end points) and marker-end (place the referenced marker to the end point ). The values of these three attributes may be none (indicating that the marker is not referenced), the reference of marker (referencing a marker), and inherit (not to mention this ).
In the preceding example, we can also see the usage of marker.

Script and style-script and style elements
In fact, basically all attributes (for all elements, not just text) can be associated with an element with CSS, and all CSS attributes are available in SVG images. You can use style attributes to design the style of an element or reference the style of a style table design element. Style Sheets should not be parsed for XML files (because they occasionally contain problematic characters), so they must be placed in the XMLCDATA section. The same is true for scripts, which must be placed in the XMLCDATA section. See the following CSS example:

The Code is as follows:
<Svgwidth = "400" height = "200" xmlns = "http://www.w3.org/2000/svg">
<Desc> Text </desc> <defs>
<Styletype = "text/css">
<! [CDATA [
. Abbreviation {text-decoration: underline ;}
]>
</Style>
</Defs>
<G>
<Textx = "20" y = "50" font-size = "30"> Colorscanbespecified </text>
<Textx = "20" y = "100" font-size = "30"> bytheir
<Tspanfill = "rgb (255, 0, 0)" class = "abbreviation"> R </tspan>
<Tspanfill = "rgb (0,255, 0)" class = "abbreviation"> G </tspan>
<Tspanfill = "rgb (0, 0, 255)" class = "abbreviation"> B </tspan> values </text>
<Textx = "20" y = "150" font-size = "30"> orbykeywordssuchas </text>
<Textx = "20" y= "200">
<Tspanstyle = "fill: lightsteelblue; font-size: 30"> lightsteelblue </tspan>,
</Text>
</G>
</Svg>

Let's look at the script example:

The Code is as follows:
<Svgwidth = "500" height = "300" xmlns = "http://www.w3.org/2000/svg">
<Desc> Scriptingtheonclickevent </desc>
<Defs>
<Scripttype = "text/ecmascript">
<! [CDATA [
FunctionhideReveal (evt ){
Varimagetargetincluevt.tar get;
VartheFill = imageTarget. getAttribute ("fill ");
If (theFill = 'white ')
ImageTarget. setAttribute ("fill", "url (# notes )");
Else
ImageTarget. setAttribute ("fill", "white ");
}
]>
</Script>
<Patternid = "notes" x = "0" y = "0" width = "50" height = "75"
PatternTransform = "rotate (15 )"
PatternUnits = "userSpaceOnUse">
<Ellipsecx = "10" cy = "30" rx = "10" ry = "5"/>
<Linex1 = "20" y1 = "30" x2 = "20" y2 = "0"
Stroke-width = "3" stroke = "black"/>
<Linex1 = "20" y1 = "0" x2 = "30" y2 = "5"
Stroke-width = "3" stroke = "black"/>
</Pattern>
</Defs>
<Ellipseonclick = "hideReveal (evt)" cx = "175" cy = "100" rx = "125" ry = "60"
Fill = "url (# notes)" stroke = "black" stroke-width = "5"/>
</Svg>

Conditional processing-switch element
The conditional processing attribute controls whether the element is rendered or not. Basically, most elements (especially graphic elements) can specify condition processing attributes. Conditional processing attributes include requiredFeatures, requiredExtensions, and systemLanguage. These attributes are a group of tests. You can specify a Value List (the first two attributes are separated by spaces, and the language attribute is separated by commas). The default value is true.

The switch element of SVG provides the ability to render based on specified conditions. A switch element is a container element that can contain graphic elements, explanatory elements, animation elements, a, foreignObject, g, image, svg, switch, text, use, and other elements. The switch element checks the conditional processing attribute of the direct sub-element in sequence, and then renders the first sub-element that meets its own conditions. Other sub-elements are ignored. Like the display attribute, these attributes only affect the rendering of elements that directly use these attributes, and do not affect referenced elements (such as elements referenced by use ). Simply put, these three attributes will affect a, altGlyph, foreignObject, textPath, tref, tspan, animate, animateColor, animateMotion, animateTransform, set, and other elements, without affecting defs, cursor, mask, clipPath, pattern and other elements (these elements are not rendered, or reference other elements ).

Note:: The display and visibility attribute values of sub-elements do not affect the condition judgment result of the switch element.
For the Value List of the condition processing attribute, see the official documentation. Here is a small example:

The Code is as follows:
<Switch>
<RectrequiredFeatures = "http://www.w3.org/TR/SVG11/feature#Filter"
X = "10" y = "10" width = "322" height = "502" opacity = "0.6"
Fill = "black" stroke = "none" filter = "url (# gblurshadow)"/>
<Rectx = "10" y = "10" width = "322" height = "502" opacity = "0.6"
Fill = "black" stroke = "none"/>
</Switch>

The example simply means that the browser used supports the filter feature, so the above rectangle (with the filter attribute) is drawn. If the filter feature is not supported, the following rectangle is drawn.
In fact, more often, more attributes are used: systemLanguage, which is the multi-language processing capability of text. For example:

The Code is as follows:
<Svgxmlns = "http://www.w3.org/2000/svg" version = "1.1" width = "5 cm" height = "5 cm">
<Switch>
<Textx = '10' y = '20' systemLanguage = "de"> de-HAHA </text>
<Textx = '10' y = '20' systemLanguage = "en"> en-haha </text>
</Switch>
</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/