HTML5 SVG 2D Introduction 8 - Document Structure and Related Elements Summary

I have introduced many basic elements, including structure-related combinations and reuse elements. Here I will briefly summarize the remaining related elements in the SVG document structure, and then continue to appreciate other features of SVG.

The elements of SVG documents can be basically divided into the following categories:

•Animation elements: animate,animateColor,animateMotion,animateTransform,set;

•Explanation elements: desc, metadata, title;

• Graphic 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 been introduced. The following are several other elements related to structure.

Any other elements can be placed in any order in the svg element, including nested svg elements.

The properties supported by the svg element are commonly used, namely id, class, x, y, width, height, viewBox, preserveAspectRatio, and fill and stroke related attributes.

Events supported by the svg element are also commonly used onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload, etc. I won’t talk about the svg element. For the complete attributes and event list, please refer to the official documentation below.

Each container element (which can contain other container elements or elements of 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. These two elements are auxiliary elements and are used to explain the relevant situation; their content is text. When the SVG document is rendered, these two elements will not be rendered into the graphics. The difference between the two elements is not too big. The title appears as a prompt message in some implementations, so the title is usually placed at the first position of the parent element.

Typical usages are as follows:

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

<g>

<title>Companysalesbyregion</title>

<desc>

Thisabarchart which shows

companysalesbyregion.

</desc>

<!--Barchartdefinedasvectordata-->

</g>

</svg>

Generally, the outermost svg element should be accompanied by a title description, so that the program is readable better.

Tags define graphical elements (arrows and multi-point markers) attached to one or more vertices (verticles of path, line, polyline, or polygon). Arrows can be attached to the starting point or end point of the path, line or polyline. Multi-point tags can append a tag to all vertices of path, line, polyline or polygon.

The marker is defined by the marker element, and then set the relevant attributes (marker, marker-start, marker-mid, and marker-end) in the path, line, polyline or polygon. See an example:

<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>

1. Marker is a container element, which can store graphic elements, container elements, animations, gradient elements, etc. in any order.

2. The marker element can create a new window: set the value of the viewBox.

3.More important attributes of marker:

markerUnits=strokeWidth|userSpaceOnUse

This property defines the coordinate system used by the contents of the properties markerWidth, markerHeight and marker. This property has 2 values ​​to choose from. The first value strokeWidth is the default value. The coordinate system used by the contents of the attributes markerWidth, markerHeight and marker are equal to the value set by the stroke-width of the graphic element of the marker.

For example, in the above example, the width of the marker element is 400 and the height is 300. However, don't confuse it. The coordinates used by the path in the mark element are the new user coordinate system set by viewBox.

Another value of this attribute is userSpaceOnUse, which represents the contents of the attributes markerWidth, markerHeight and marker using the coordinate system that refers to the graphic elements of the marker.

refX,refY: defines the position coordinates of the referenced point aligned with the marker. For example, in the above example, the referenced point is the end point, and it must be aligned to the (0,5) position of the marker. Note that refX and refY use the end user coordinate system transformed by viewBox.

markerWidth, markerHeight: the width and height of the marker window, this is easy to understand.

oriented: defines the angle of the marker rotation. You can specify an angle or directly assign auto.

a. If the point where the marker is located belongs to only one path, the forward direction of the marker's x-axis is the same as the path. See the example above.

b. If the point where the marker is located belongs to two different paths, the forward direction of the marker's x-axis is consistent with the angle equalization line of the angle between the two paths.

4. Marker attributes of graphical elements

To reference a marker, the relevant attributes need to be used, mainly these three: marker-start (put the referenced marker to the starting point), marker-mid (put the referenced marker to all points except the starting point and the end point), marker-end (put the referenced marker to the end point). The values ​​of these three attributes may be none (represents that marker is not quoted), marker reference (refers to a certain marker), inherit (needless to say).

You can also see the usage of marker from the above example.

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 the SVG image. You can directly use style attributes to design the style of an element, or refer to the style of a style sheet design element. Stylesheets should not be parsed for XML files (because they occasionally contain characters that cause problems), so they need to be placed in the XMLCDATA section. The same is true for scripts, and they need to be placed in the XMLCDATA section. See the following CSS example:

<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:

<svgwidth="500"height="300"xmlns="http://www.w3.org/2000/svg">

<desc>Scriptingtheonclickeven</desc>

<defs>

<scripttype="text/ecmascript">

<![CDATA[

functionhideReveal(evt){

variableTarget=evt.target;

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 attributes are attributes that can control whether the element is rendered or not. Basically most elements (especially graphic elements) can specify conditional processing properties. There are 3 conditional processing properties: requiredFeatures, requiredExtensions and systemLanguage. These properties are a set of tests, which allow you to specify a list of values ​​(the first two properties are separated by spaces, and the language properties are separated by commas), and the default values ​​are true.

SVG's switch element provides the ability to render according to specified conditions. The 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 will check the conditional processing attributes of the direct child elements in order, and then render the first child element that meets its own conditions. Other child elements will be ignored. These properties, like the display properties, will only affect the rendering of elements that use these properties directly, and will not affect the referenced elements (such as the elements referenced by use). Simply put, these three attributes will affect elements such as a, altGlyph, foreignObject, textPath, tref, tspan, animate, animateColor, animateMotion, animateTransform, set, etc., and will not affect elements such as defs, cursor, mask, clipPath, pattern (these elements are not renderable, or they refer to other elements).

For the list of values ​​for conditional processing attributes, please refer to the official document. Here is a small example:

<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(#gblshadow)"/>

<rectx="10"y="10"width="322"height="502"opacity="0.6"

fill="black"stroke="none"/>

</switch>

The meaning of this example is simply: the browser used supports the filter feature, then draw the above rectangle (with filter attribute). If the filter feature is not supported, draw the below rectangle.

In fact, more often, the most commonly used attribute is systemLanguage, which is the multi-language processing ability of text. For example:

<svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="5cm"height="5cm">

<switch>

<textx='10'y='20'systemLanguage="de">de-HAHA</text>

<textx='10'y='20'systemLanguage="en">en-haha</text>

</switch>

</svg>

Script index: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Development Center: https://developer.mozilla.org/en/SVG

Popular reference: http://www.chinasvg.com/

Official document: http://www.w3.org/TR/SVG11/