SVG

最近看到有关SVG的漏洞，收录一些相关资料。

 

维基百科：http://zh.wikipedia.org/zh/SVG

 

SVG动画介绍

 

转自http://www.souzz.net/html/svg/1/71028.html

 

1 SVG属性动画
　　SVG动画一般通过更改对象属性值来实现。SVG工作组与W3C组织的SYMM(Synchronized MultiMedia WorkingGroup，同步多媒体工作组)合作推出了SVG动画元素的定义规范。SVG中用于定义动画的元素有5个<animate>，<set>，<animate-Motion>，<animateColor>，<animatcTransform>。其中<animate>元素允许数量属性或样式参数随时间而变化，<set>元素可设定非数量属性或样式参数随时间而变化，<animate-Motion>元素可以沿着指定的路径移动元素以产生动画效果；<animateColor>元素用来设定元素的某些与颜色有关的属性或样式参数随时间而变化；<animateTransform>元素可以控制对可视化元素进行坐标变换时的动画效果。

　　移动和旋转动画
　　移动和旋转动画可以用<animateTransform>元素来实现。<animateTransform>元素用于可视化元素的动态坐标变换，其主要属性除通用属性外还有两个attributeName和type，其中attributeName属性值必须指明为’'transform"，type属性指明动态坐标变化的类型，其值可以为"translate"(表示平移变换)、"scale"(表示拉伸变换)、"rotate"(表示旋转变换)、"skewX"，及”skewY"(表示沿X和Y方向上的歪斜变换)。

　　拉幕和缩放动画
　　拉幕和缩放动画都是对图形对象的宽度和高度进行改变而引起的动画效果，可以用<animate>元素来实现，利用from和to属性来定义图形的起始和终止值。<animate>元素没有其特有的属性。

　　色彩渐变动画
　　色彩渐变动画是由对象的填充色彩变化而引起的动画效果，可以用<animateColor>元素来实现。<animateColor>元素也没有其特有的属性，只是在使用from，to，by和values等属性时，其属性值必须是颜色值。

　　沿路径动画
　　沿路径动画是指对象沿一定的路径移动，可以用SVG的<animateMotion>元素来实现。除了通用属性外，<animateMotion>元素还具有path、rotate及keyPoints属性，其中path指明动画路径，rotate指明可视化元素在沿着路径运动过程中是否随路径而转动，keyPoints表示各个关键点所在的位置在路径方向上与路径起点间的距离，它和key-Times属性共同决定一系列关键点以精确控制路径动画中时间与运动路程的关系。

　　顺序与同步动画
　　同步动画就是多个对象同时进行动作，顺序动画则是根据时间上的先后顺序进行动作。两种动画根据不同的动画类型可以映射为不同的SVG动画元素，最关键的地方在于动画元素中的begin属性值的设定。设置动画顺序通常要将动画元素的id和begin属性值结合起来，如果第二个对象动画(id="anim1")在第一个对象动画(id="anim2)结束后2秒才开始，那么可以设置第二个动画的begin属性为’'animl.end+2s"，如果是同步动画则设置为’'animl.begin"。

2 SVG脚本动画
　　SVG标准允许将JavaScript脚本代码以两种方式来实现:一个是内嵌脚本方式；另一个是外部脚本方式。

　　内嵌脚本
　　<script>元素用于在SVG文档中嵌入一段脚本，它的功能几乎和HTML中的<script>的标记一模一样。脚本语言的程序段不属于合法的XML语句，所以需要使用CDATA的嵌入方式，其一般格式是:

<script type="text/javascript"><![CDATA[
<!一此处插入脚本程序段一>
]]</script>

　　元素内嵌脚本属性type="contentype”用MIME的方式指明所用的Script语言的类型。

　　外部脚本
　　<script>元素外部脚本属性xlink:href="/<uri>”指明一个引用外部脚本文件的URL。因为在SVG引用外部脚本文件时是以utf编码方式引入的，所以我们不能在待引用的脚本文件中使用中文，甚至在注释中使用中文也会使代码运行出现不确定的异常。

　　从脚本实现的功能上来说，这两种代码加载方式没有区别，我们可以将共享的脚本代码放在外部连接文件中，把SVG文件个性化的代码嵌在自身的文件中。

　　SVG文档可以按照DOM接口，通过脚本语言访问各个元素，因此可以动态改变SVG元素的各种属性，包括动画属性，从而可以实现单纯依靠动画属性而无法完成的更为复杂的动画。

　　更加让人叹为观止的是，SVG文档还支持DOM规范定义的大量的交互事件，如omnouseover、onclick等，而且都可以指派给任何一个SVG元素，从而实现对自身或对其它物件、图像的控制，完成SVG的交互式动画。