svg参考手册.doc

SVG 元素元素列中的链接指向了具体元素的相关属性和更多有用的信息。元素描述a定义超链接altGlyph允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字）altGlyphDef定义一系列象性符号的替换（例如，音乐符号或者亚洲文字）altGlyphItem定义一系列候选的象性符号的替换animate随时间动态改变属性animateColor规定随时间进行的颜色转换animateMotion使元素沿着动作路径移动animateTransform对元素进行动态的属性转换circle定义圆clipPathcolor-profile规定颜色配置描述cursor定义独立于平台的光标definition-src定义单独的字体定义源defs被引用元素的容器desc对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。ellipse定义椭圆feBlendSVG 滤镜。使用不同的混合模式把两个对象合成在一起。feColorMatrixSVG 滤镜。应用matrix转换。feComponentTransferSVG 滤镜。执行数据的 component-wise 重映射。feCompositeSVG 滤镜。feConvolveMatrixSVG 滤镜。feDiffuseLightingSVG 滤镜。feDisplacementMapSVG 滤镜。feDistantLightSVG 滤镜。 Defines a light sourcefeFloodSVG 滤镜。feFuncASVG 滤镜。feComponentTransfer 的子元素。feFuncBSVG 滤镜。feComponentTransfer 的子元素。feFuncGSVG 滤镜。feComponentTransfer 的子元素。feFuncRSVG 滤镜。feComponentTransfer 的子元素。feGaussianBlurSVG 滤镜。对图像执行高斯模糊。feImageSVG 滤镜。feMergeSVG 滤镜。创建累积而上的图像。feMergeNodeSVG 滤镜。feMerge的子元素。feMorphologySVG 滤镜。 对源图形执行fattening 或者 thinning。feOffsetSVG 滤镜。相对与图形的当前位置来移动图像。fePointLightSVG 滤镜。feSpecularLightingSVG 滤镜。feSpotLightSVG 滤镜。feTileSVG 滤镜。feTurbulenceSVG 滤镜。filter滤镜效果的容器。font定义字体。font-face描述某字体的特点。font-face-formatfont-face-namefont-face-srcfont-face-uriforeignObjectg用于把相关元素进行组合的容器元素。glyph为给定的象形符号定义图形。glyphRef定义要使用的可能的象形符号。hkernimageline定义线条。linearGradient定义线性渐变。markermaskmetadata规定元数据。missing-glyphmpathpath定义路径。patternpolygon定义由一系列连接的直线组成的封闭形状。polyline定义一系列连接的直线。radialGradient定义放射形的渐变。rect定义矩形。script脚本容器。（例如ECMAScript）set为指定持续时间的属性设置值stopstyle可使样式表直接嵌入SVG内容内部。svg定义SVG文档片断。switchsymboltexttextPathtitle对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。treftspanuseviewvkernSVG中可以添加三种基本的物件:文本,图形和路径。 SVG文本(text):blueknight SVG图形：1、矩形 2、圆 SVG路径(path):路径使用下面的属性来描述:moveto 设置新的坐标点 lineto 画一条直线 curveto 使用贝赛尔函数画制曲线 arc 画椭圆和圆 closepath 闭合路径 M代表moveto,设置坐标点,L代表lineto,画一条直线,z代表结束。 SVG样式表(CSS): 内部样式表,植入式样式表,外部样式表。 植入式样式表：.st2fill:none;stroke:#990000;stroke-width:2; SVG填充(fill)：填充(fill)fill后面可使用的值: none, current-color, (color) none是无色,Current-color返回的是一个父文档(可以是XML文档或者SVG文档)的颜色值,(color)是自定义的色彩。 填充规则(fillrule)fillrule后可使用的值: evenodd, nonzero, inherit 填充规则属性定义对所有路径区域填充或者只是对交叉部分填充inherit 指的是当前物件的填充属性和围绕它的物件(或物件组)的属性一致。 填充透明度(fill-opacity)fill-opacity后可使用的值: 0到1的任何数 填充透明度决定了一个物件的填充是实色填充(透明度数值为1)还是透明的填充(透明度数值为0).关于物件的透明度属性其他还有如:笔划透明度(stroke-opacity),对应于笔划的透明程度;透明(opacity),对应于物件整体的透明程度。 SVG笔划(stroke):笔划(stroke)stroke后面可使用的值: none, current-color, (color)笔划属性决定了物件是否利用笔划进行勾勒,并且使用什么样颜色的笔画。none是无色,Current-color返回的是一个父文档(可以是XML文档或者SVG文档)的颜色值,(color)是自定义的色彩。 笔划宽度(stroke-width)stroke-width后可使用的值是: (width), inherit 笔划宽度默认值是1像素宽度。用户也可以自定义宽度,可以使用像素值也可以使用百分比。这里的所有SVG图像都使用的是像素值.inherit代表继承前面(父)的物件(或物件组)的笔划属性。 笔划端点(stroke-linecap)stroke-linecap可使用的值是: butt, round, square, inherit笔划端点的属性定义了开放笔划(未闭合)的端点的形状,分别是粗大的butt,圆滑的round,平整的square和继承 的inherit. 笔划连接(stroke-linejoin)stroke-linejoin可使用的值是:miter, round, bevel, inherit 笔划连接属性定义了路径拐角的形状,miter是默认值,round光滑连接,bevel折线连接,inherit继承 笔划圆角连接(stroke-miterlimit)stroke-miterlimit后可使用的值是: (miterlimit), inherit 笔划圆角连接定义了两条相交成一定角的线在连接处的圆滑程度。数值必须为大于1的整数,默认的值是8。 虚线笔划(stroke-dasharray)stroke-dasharray后可使用的值是:(dasharray), inherit 虚线笔划定义了使用虚线的虚化程度 SVG梯度(Gradients):梯度是填充和笔划属性的一个特殊应用。梯度可以产生用矢量完成的色彩渐变。SVG支持线式的(linear)和圆式的(radial)色彩梯度变化。 梯度属性的实现利用了(defs)标签(元素),这个标签包含了填充和笔划属性,由此,可以给物件加入特别的效果。结合下面的代码和例子,体会(defs)标签的含义和使用。 SVG滤镜: Text with a cool effect 两个关键的属性就是SourceGraphic和SourceAlpha.SourceGraphic表示了需要被滤镜的原始物件,例如图形,文 本.SourceAlpha和SourceGraphic属性上基本类似,但包含了一个alpha通道。这样可以通过alpha通道的值实现滤镜的功能。 通过简单滤镜的组合,还可以产生更加丰富和多样的效果来。一般,图像滤镜效果的产生首先是结合简单滤镜形成总的效果然后叠加入图像中产生最终图像。 SVG和当前的标准网络图像(JPEG,GIF,PNG):image xling:href=/ SVG支持ICC色彩模式:SVG文件可以自由的制定所使用的色彩模式。使用ICC色彩模式需要定义(icc-color)属性。SVG文件默认的色彩是sRGB色彩,但是你可以通过(icc-color)转换到ICC色彩。 下面的例子中同时使用了两种色彩定义,当用户系统支持ICC色彩模式时(win98和Mac OS已经自动安装),就会以ICC模式显示下面的S V G,填充色#900000,笔划色#800080。否则按照填充色红色,笔划色#0000FF显示。fill:red icc-color(myRGB,90,0,0);fill-opacity:.5; stroke:#0000FF icc-color(myRGB,128,0,128); SVG的变形属性:矩阵( (a)(b)(c)(d)(e)(f) )矩阵定义了一个2*3的矩阵(或者看作六个数的一个数列). 它和元素相匹配.详细请参看下面其他变化的解释来理解. 移动( (tx)(ty) )移动属性的设置将移动元素.(tx)的值沿着x轴,(ty)的值沿着y轴.在六数数列中(即一个矩阵),数列的最后两位为(tx)(ty). 如果要放缩元素而元素又不在中心点(0,0),那么你必须先将元素移动使元素中心在中心点,然后执行比例,元素放缩后,再将元素移动回到原来的位置.例如,要把一个在(150,100)出的元素缩小到50%,你需要执行下列步骤: 1. 移动(150,100) 2. 比例 .5 3. 移动(-150,-100) (请注意次序) 旋转( (rotate-angle) )旋转属性的设置可以控制元素绕着中心点(0,0)旋转任意角度(rotate-angle).例如,如果角度值(rotate-angle)为45 度,元素将会顺时针旋转45度.就像在比例中我们做的,如果元素不在中心点,我们首先要将它移动到中心点,然后旋转,再将它移回原来的位置. x轴倾斜x轴倾斜将在中心点(0,0)把元素在x轴轴向倾斜一定角度(angle).在六数数列中(即一个矩阵),x轴倾斜角度(angle)在第三位以弧度表示. y轴倾斜y轴倾斜将在中心点(0,0)把元素在y轴轴向倾斜一定角度(angle).在六数数列中(即一个矩阵),y轴倾斜角度(angle)在第二位以弧度表示. SVG动画:颜色动画(animateColor)元素定义了SVG颜色动画的属性. attributeName定义了色彩动画的性质,即填充变色,attributeType定义为SVG规范中已经给出 的具有动画性质的CSS(串接样式表 Cascading Stylesheets简称CSS).其他的attributeType还有XML(动态标识语言)和auto(默认设置). 需要产生动画的元素知道了要对什么进行动画,(上面的例子中元素就是被标识的gradient_star),它还需要知道怎样进行变化来长生动画.这需要下面的属性值来描述: from 定义起始数值 to 定义结束数值 by 定义相对的偏移值 values 一张相对分离的数值表 利用标签dur和repeatCount控制动画的时间属性.色彩动画总的持续时间由dur决定,在这个例子中是10秒,动画的循环次数由 repeatCount定义,本例中repeatCount的值是不定值indefinite,动画将无限循环播放下去. 运动路径(animateMotion)标签允许元素产生一些简单的旋转,放缩,移动和倾斜变化. 在(animateMotion)标签里添加路径数据,SVG元素将可以沿着路径产生运动.旋转rotate属性控制SVG元素沿着特定路径运动时 的的旋转性质.旋转的值可以是一个相对于当前用户的图形系统中所给定的x轴定义的一个角度值,也可默认为auto,即沿着路径方向旋转,或 是auto-reflect,沿着路径方向的180度反方向旋转.在上面的例子中,沿垂直的八字形运动的元素旋转的值是-45度,沿着水平八字形运动 的元素旋转的值是auto. 运动控制默认的运动一般