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是放到父元素的第一个位置上。 典型的用法如下： 复制代码 代码如下: 通常，最外层的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)就可以了。看个例子： 复制代码 代码如下: 下面详细看看marker的相关知识： 1.marker是容器元素，可以存放任意顺序的图形元素，容器元素，动画，渐变元素等。 2.marker元素可以创建新的视窗：设置viewBox的值。 3.marker比较重要的属性： markerUnits="strokeWidth|userSpaceOnUse" 这个属性定义了属性markerWidth,markerHeight和marker的内容使用的坐标系统。这个属性有2个值可选，第一个值strokeWidth是默认值，代表属性markerWidth,markerHeight和marker的内容使用的坐标系统的单位等于引用该marker的图形元素的stroke-width设置的值。 例如上面的例子中，marker元素的width是400,height是300，不过千万不要混淆了，mark元素中的path使用的坐标是viewBox设置的新的用户坐标系。 该属性另外一个取值userSpaceOnUse，代表属性markerWidth,markerHeight和marker的内容使用引用该marker的图形元素的坐标系统。 refX,refY：定义了引用的点与marker对齐的位置坐标。例如上面的例子中，引用的点是终点，要把它对齐到marker的(0,5)位置。注意refX,refY使用的是经过viewBox变换过的最终用户坐标系。 markerWidth,markerHeight：marker视窗的宽和高，这个很好理解。 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例子： 复制代码 代码如下:（编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |