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

前面介绍了很多的基本元素，包括结构相关的组合和重用元素，这里先对svg的文档结构中剩下的相关元素简单总结一下，然后继续向前领略svg的其他特性。

svg文档的元素基本可以分为以下几类：

•动画元素：animate,animatecolor,animatemotion,animatetransform,t；

•解释元素：desc,metadata,title；

•图形元素：circle,ellip,line,path,polygon,polyline,rect；

•结构元素：defs,g,svg,symbol,u；

•渐变元素：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,prerveaspectratio,以及fill和stroke的相关属性。

svg元素支持的事件也是常用的onload,onmouover,onmoumove,onmoudown,onmouup,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是放到父元素的第一个位置上。
与虎谋皮
典型的用法如下：

复制代码 代码如下:

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

通常，最外层的svg元素要配以title说明，这样程序可读性更好。

标记-marker元素

标记定义了附加到一个或者多个顶点(path,line,polyline或者polygon的顶点)上的图形元素(箭头和多点标记)。箭头可以通过把一个标记附加到path,line或者polyline的起点或者终点上。多点标记可以把一个标记附加到path,line,polyline或者polygon的所有顶点上。

标记是由marker元素定义的，然后在path,line,polyline或者polygon中设置相关的属性(marker,marker-start,marker-mid,和marker-end)就可以了。看个例子：

复制代码 代码如下:

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

下面详细看看marker的相关知识：

1.marker是容器元素，可以存放任意顺序的图形元素，容器元素，动画，渐变元素等。

2.marker元素可以创建新的视窗：设置viewbox的值。

3.marker比较重要的属性：

markerunits=”strokewidth|urspaceonu”

这个属性定义了属性markerwidth,markerheight和marker的内容使用的坐标系统。这个属性有2个值可选，第一个值strokewidth是默认值，代表属性markerwidth,markerheight和marker的内容使用的坐标系统的单位等于引用该marker的图形元素的stroke-width设置的值。

例如上面的例子中，marker元素的width是400,height是300，不过千万不要混淆了，mark元素中的path使用的坐标是viewbox设置的新的用户坐标系。

该属性另外一个取值urspaceonu，代表属性markerwidth,markerheight和marker的内容使用引用该marker的图形元素的坐标系统。

refx,refy：定义了引用的点与marker对齐的位置坐标。例如上面的例子中，引用的点是终点，要把它对齐到marker的(0,5)位置。注意refx,refy使用的是经过viewbox变换过的最终用户坐标系。

markerwidth,markerheight：marker视窗的宽和高，这个很好理解。lol定位赛

orient：定义了marker旋转的角度。可以指定一个角度或者直接赋值auto。


auto代表x轴正方向按照下列规则旋转：

a.如果marker所在的点只属于一个path，则marker的x轴正向与path走向相同。参看上面例子。

b.如果marker所在的点属于两个不同的path，则marker的x轴正向与两个path的夹角的角等分线走向一致。

4.图形元素的marker属性

图形元素要引用一个marker则需要使用相关的属性，主要是这3个：marker-start(把引用的marker放到起点),marker-mid(把引用的marker放到除起点和终点外的所有点),marker-end(把引用的marker放到终点)。这3个属性的取值可能是none(代表不引用marker),marker的引用(引用某marker)，inherit(这个不用多说了)。

从上面的例子中也可以看到marker的用法。

脚本与样式-script元素与style元素

实际上，基本上所有的属性(对于所有元素，不仅是文本)都可以用css与一个元素关联，并且所有css属性都在svg图像中可用。可以直接用样式属性设计元素的样式，或者引用样式表设计元素的样式。对xml文件来说不应该解析样式表(因为它们偶尔包含会引起问题的字符)，因此需要将它们置于xmlcdata节。脚本也是同样的道理，需要放到xmlcdata节中。看下面的css例子：

复制代码 代码如下:

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

再看脚本的例子：

复制代码 代码如下:

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

<desc>scriptingtheonclickevent</desc>

<defs>

<scripttype=”text/ecmascript”>

<![cdata[

functionhidereveal(evt){

varimagetarget=evt.target;

varthefill=imagetarget.getattribute(“fill”);

if(thefill==’white’)

imagetarget.tattribute(“fill”,”url(#notes)”);

el

imagetarget.tattribute(“fill”,”white”);

}

]]>

</script>

<patternid=”notes”x=”0″y=”0″width=”50″height=”75″

patterntransform=”rotate(15)”

patternunits=”urspaceonu”>

<ellipcx=”10″cy=具鸡黍221;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>

<elliponclick=”hidereveal(evt)”cx=”175″cy=”100″rx=”125″ry=”60″

fill=”url(#notes)”stroke=”black”stroke-width=”5″/>

</svg>

条件处理-switch元素

条件处理属性是能控制所在元素渲染与否的属性。基本上大多数的元素(特别是图形元素)都可以指定条件处理属性。条件处理属性有3个：requiredfeatures,requiredextensions和systemlanguage。这些属性就是一组测试，都允许指定一个值列表(前面两个属性是空格隔开的，语言这个属性是使用逗号隔开的)，默认值都为true。

svg的switch元素提供了按指定条件渲染的能力。switch元素是一个容器元素，可以包含图形元素，解释性元素，动画元素，a,foreignobject,g,image,svg,switch,text,u等元素。switch元素会按顺序检查直接子元素的条件处理属性，然后渲染满足自身条件的的第一个子元素，其他的子元素都会被忽略。这些属性与display属性一样，只会影响直接使用这些属性的元素的渲染，不会影响引用的元素(比如u引用的元素)。简单的说，这3个属性会影响a,altglyph,foreignobject,textpath,tref,tspan,animate,animatecolor,animatemotion,animatetransform,t等元素，不会影响defs,cursor,mask,clippath,pattern等元素(这些元素那么不是可渲染的，要么就是引用别的元素)。

注意：子元素的display和visibility属性值并不影响switch元素条件判断的结果。

条件处理属性的取值列表参看官方文档，这里就看一个小例子：

复制代码 代码如下:

<switch>

<rectrequiredfeatures=”/d/file/titlepic/feature />
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>

这个例子的意思简单的说就是：使用的浏览器支持filter特性，那么就绘制上面的矩形(带filter属性)，如果不支持filter特性，就绘制下面的矩形。

其实更多的时候，用的比较多的属性是systemlanguage，就是文本的多语言处理能力。例如：

复制代码 代码如下:

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

实用参考：

脚本索引：

开发中心：https://developer.mozilla.org/en/svg

热门参考：

官方文档：http://www.w3.org/tr/svg11/