HTML5之SVG 2D入门8—文档结构及相关元素总结

前面介绍了很多的基本元素，包括结构相关的组合和重用元素，这里先对SVG的文档结构中剩下的相关元素简单总结一下，然后继续向前领略SVG的其他特性。
SVG文档的元素基本可以分为以下几类：
•动画元素：animate,animateColor,animateMotion,animateTransform,set；
•解释元素：desc,metadata,title；
•图形元素：circle,ellipse,line,path,polygon,polyline,rect；
•结构元素：defs,g,svg,symbol,use；
•渐变元素：linearGradient,radialGradient；
•其他元素：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。
其中图形元素，渐变元素，文本，图像元素和组合等都介绍过了，下面介绍另外几个与结构相关的元素。

视窗-svg元素
可以在svg元素中以任何顺序放置任何的其他元素，包括嵌套svg元素。
svg元素支持的属性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相关属性。
svg元素支持的事件也是常用的onload,onmouseover,onmousemove,onmousedown,onmouseup,onclick,onfocusin,onfocusout,onresize,onscroll,onunload等。svg元素就不多说了，完整的属性和事件列表参看后面的官方文档。

解释性元素-desc元素与title元素
每个容器元素(可以包含其他容器元素或者图形元素的元素，例如：a,defs,glyph,g,marker,mask,missing-glyph,pattern,svg,switch和symbol)和图形元素都可以包含desc和title元素，这两个元素都是辅助性的元素，用于解释相关情境；它们的内容都是文本。当SVG文档被渲染的时候，这2个元素不会被渲染到图形中。这个2个元素之间差别不是太大，title在有些实现中是作为提示信息出现的，所以通常title是放到父元素的第一个位置上。
典型的用法如下：

复制代码代码如下:




Thisisabarchartwhichshows
companysalesbyregion.