1、SVG 元素元素列中的链接指向了具体元素的相关属性和更多有用的信息。元素 描述a 定义超链接altGlyph 允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字）altGlyphDef 定义一系列象性符号的替换（例如，音乐符号或者亚洲文字）altGlyphItem 定义一系列候选的象性符号的替换animate 随时间动态改变属性animateColor 规定随时间进行的颜色转换animateMotion 使元素沿着动作路径移动animateTransform 对元素进行动态的属性转换circle 定义圆clipPath color-profile 规定颜色配置描述curs
2、or 定义独立于平台的光标definition-src 定义单独的字体定义源defs 被引用元素的容器desc 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。ellipse 定义椭圆feBlend SVG 滤镜。使用不同的混合模式把两个对象合成在一起。feColorMatrix SVG 滤镜。应用 matrix 转换。feComponentTransfer SVG 滤镜。执行数据的 component-wise 重映射。feComposite SVG 滤镜。feConvolveMatrix SVG 滤镜。feDiffuseLighting SV
3、G 滤镜。feDisplacementMap SVG 滤镜。feDistantLight SVG 滤镜。 Defines a light sourcefeFlood SVG 滤镜。feFuncA SVG 滤镜。 feComponentTransfer 的子元素。feFuncB SVG 滤镜。 feComponentTransfer 的子元素。feFuncG SVG 滤镜。 feComponentTransfer 的子元素。feFuncR SVG 滤镜。 feComponentTransfer 的子元素。feGaussianBlur SVG 滤镜。对图像执行高斯模糊。feImage SVG 滤镜
4、。feMerge SVG 滤镜。创建累积而上的图像。feMergeNode SVG 滤镜。 feMerge 的子元素。feMorphology SVG 滤镜。 对源图形执行 “fattening“ 或者 “thinning“。feOffset SVG 滤镜。相对与图形的当前位置来移动图像。fePointLight SVG 滤镜。feSpecularLighting SVG 滤镜。feSpotLight SVG 滤镜。feTile SVG 滤镜。feTurbulence SVG 滤镜。filter 滤镜效果的容器。font 定义字体。font-face 描述某字体的特点。font-face-fo
5、rmat font-face-name font-face-src font-face-uri foreignObject g 用于把相关元素进行组合的容器元素。glyph 为给定的象形符号定义图形。glyphRef 定义要使用的可能的象形符号。hkern image line 定义线条。linearGradient 定义线性渐变。marker mask metadata 规定元数据。missing-glyph mpath path 定义路径。pattern polygon 定义由一系列连接的直线组成的封闭形状。polyline 定义一系列连接的直线。radialGradient 定义放射形的
6、渐变。rect 定义矩形。script 脚本容器。（例如 ECMAScript）set 为指定持续时间的属性设置值stop style 可使样式表直接嵌入 SVG 内容内部。svg 定义 SVG 文档片断。switch symbol text textPath title 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。tref tspan use view vkernSVG 中可以添加三种基本的物件: 文本,图形和路径。 SVG 文本 (text):blueknight SVG 图形： 1、矩形 2、圆 SVG 路径 (path):路径使用下面
7、的属性来描述:“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
8、“是无色,“Current-color“返回的是一个父文档 (可以是 XML 文档或者 SVG 文档)的颜色值,(color)是自定义的色彩。 “填充规则“(fillrule)fillrule 后可使用的值: evenodd, nonzero, inherit 填充规则属性定义对所有路径区域填充或者只是对交叉部分填充“inherit“ 指的是当前物件的填充属性和围绕它的物件(或物件组)的属性一致。 “填充透明度“(fill-opacity)fill-opacity 后可使用的值: 0 到 1 的任何数 填充透明度决定了一个物件的填充是实色填充(透明度数值为 1)还是透明的填充 (透明度数值为
9、0).关于物件的透明度属性其他还有如:“笔划透明度“(stroke-opacity), 对应于笔划的透明程度 ;“透明“(opacity),对应于物件整体的透明程度。 SVG 笔划 (stroke):“笔划“(stroke)stroke 后面可使用的值: none, current-color, (color)笔划属性决定了物件是否利用笔划进行勾勒,并且使用什么样颜色的笔画。“none“是无色,“Current-color“返回的是一个父文档(可以是 XML 文档或者 SVG 文档) 的颜色值,(color) 是自定义的色彩。 “笔划宽度“(stroke-width)stroke-width
10、后可使用的值是: (width), inherit “笔划宽度“ 默认值是 1 像素宽度。用户也可以自定义宽度,可以使用像素值也可以使用百分比。这里的所有SVG 图像都使用的是像素值.“inherit“ 代表继承前面( 父)的物件 (或物件组)的笔划属性。 “笔划端点“(stroke-linecap)stroke-linecap 可使用的值是: butt, round, square, inherit“笔划端点“ 的属性定义了开放笔划( 未闭合 )的端点的形状,分别是“粗大的“butt,“ 圆滑的“round,“平整的“square 和“ 继承 的“inherit. “笔划连接“(stroke
11、-linejoin)stroke-linejoin 可使用的值是 :miter, round, bevel, inherit 笔划连接属性定义了路径拐角的形状,“miter“是默认值,“round“光滑连接,“bevel“折线连接,“inherit“ 继承 “笔划圆角连接“(stroke-miterlimit)stroke-miterlimit 后可使用的值是: (miterlimit), inherit “笔划圆角连接“定义了两条相交成一定角的线在连接处的圆滑程度。数值必须为大于 1 的整数,默认的值是 8。 “虚线笔划“(stroke-dasharray)stroke-dasharray
12、后可使用的值是:(dasharray), inherit 虚线笔划定义了使用虚线的虚化程度 SVG 梯度 (Gradients):梯度是填充和笔划属性的一个特殊应用。梯度可以产生用矢量完成的色彩渐变。SVG 支持线式的(linear) 和圆式的(radial)色彩梯度变化。 梯度属性的实现利用了(defs)标签( 元素),这个标签包含了填充和笔划属性 ,由此,可以给物件加入特别的效果。结合下面的代码和例子,体会(defs)标签的含义和使用。 SVG 滤镜 : Text with a cool effect 两个关键的属性就是 SourceGraphic 和 SourceAlpha.Source
13、Graphic 表示了需要被滤镜的原始物件,例如图形,文 本.SourceAlpha 和 SourceGraphic 属性上基本类似,但包含了一个 alpha 通道。这样可以通过 alpha 通道的值实现滤镜的功能。 通过简单滤镜的组合,还可以产生更加丰富和多样的效果来。一般,图像滤镜效果的产生首先是结合简单滤镜形成总的效果然后叠加入图像中产生最终图像。 SVG 和当前的标准网络图像(JPEG,GIF,PNG):image xling:href=“/ “ SVG 支持 ICC 色彩模式:SVG 文件可以自由的制定所使用的色彩模式。使用 ICC 色彩模式需要定义(icc-color)属性。SVG
14、 文件默认的色彩是 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
15、)(f) )“矩阵“定义了一个 2*3 的矩阵( 或者看作六个数的一个数列). 它和元素相匹配 .详细请参看下面其他“ 变化 “的解释来理解. “移动“( (tx)(ty) )“移动“属性的设置将移动元素 .(tx)的值沿着 x 轴,(ty) 的值沿着 y 轴.在六数数列中(即一个矩阵),数列的最后两位为(tx)(ty). 如果要放缩元素而元素又不在中心点(0,0),那么你必须先将元素移动使元素中心在中心点 ,然后执行“比例,元素放缩后,再将元素移动回到原来的位置 .例如 ,要把一个在(150,100) 出的元素缩小到 50%,你需要执行下列步骤 : 1. “移动“(150,100) 2. “
16、比例“ .5 3. “移动“(-150,-100) (请注意次序) “旋转“( (rotate-angle) )“旋转“属性的设置可以控制元素绕着中心点(0,0)旋转任意角度(rotate-angle).例如 ,如果角度值(rotate-angle) 为 45 度,元素将会顺时针旋转 45 度.就像在“ 比例“中我们做的,如果元素不在中心点,我们首先要将它移动到中心点,然后旋转,再将它移回原来的位置. “x 轴倾斜“x 轴倾斜“ 将在中心点(0,0)把元素在 x 轴轴向倾斜一定角度 (angle).在六数数列中(即一个矩阵),“x 轴倾斜“角度 (angle)在第三位以弧度表示. “y 轴倾斜
17、“y 轴倾斜“ 将在中心点(0,0)把元素在 y 轴轴向倾斜一定角度 (angle).在六数数列中(即一个矩阵),“y 轴倾斜“角度 (angle)在第二位以弧度表示. SVG 动画 :颜色动画(animateColor)元素定义了 SVG 颜色动画的属性. attributeName 定义了色彩动画的性质,即填充变色,attributeType 定义为 SVG 规范中已经给出 的具有动画性质的 CSS(串接样式表 Cascading Stylesheets简称 CSS).其他的 attributeType 还有“XML“(动态标识语言)和“auto“(默认设置). 需要产生动画的元素知道了要
18、对什么进行动画,(上面的例子中元素就是被标识的“gradient_star“),它还需要知道怎样进行变化来长生动画.这需要下面的属性值来描述 : from 定义起始数值 to 定义结束数值 by 定义相对的偏移值 values 一张相对分离的数值表 利用标签 dur 和 repeatCount 控制动画的时间属性.色彩动画总的持续时间由 dur 决定,在这个例子中是 10 秒,动画的循环次数由 repeatCount 定义,本例中 repeatCount 的值是不定值“indefinite“,动画将无限循环播放下去 . 运动路径(animateMotion)标签允许元素产生一些简单的旋转,放缩
19、,移动和倾斜变化. 在(animateMotion)标签里添加路径数据,SVG 元素将可以沿着路径产生运动 .“旋转“rotate 属性控制 SVG 元素沿着特定路径运动时 的的旋转性质.旋转的值可以是一个相对于当前用户的图形系统中所给定的 x 轴定义的一个角度值,也可默认为“auto“,即沿着路径方向旋转,或 是“auto-reflect“,沿着路径方向的 180 度反方向旋转.在上面的例子中 ,沿垂直的八字形运动的元素旋转的值是-45 度,沿着水平八字形运动 的元素旋转的值是“auto“. 运动控制 默认的运动一般是线性运动.calcMode 的下列属性能进一步控制元素的运动: 离散 动画将在两个数值之间产生跳跃的变化. 线性 默认设置. 步进 类似于线性,但定义了类线性变化的间隔值. 曲线 对应于按照贝赛尔曲线定义的时间-位置曲线. 关键曲线 使用“曲线“模式,能够用最小的定义产生很复杂的变化.例如,实时的控制元素的 x 和 y 值,就能对应的实时控制元素的运动. 使用“曲线 “模式,动画元素需要包含 keySplines 属性值.keySplines 定义了贝赛尔曲线的关键控制点,来控制动画的变化.这样的控制允许平滑的产生变化(类似于淡入淡出的平滑效果),这一点在动画中非常重要
