SVG 入门教程(七) 动画与交互

控制属性	<nobr>第 1 页（共2 页）</nobr>

即使在 SVG 产生以前，动画和交互性已经在 Web 上确立了牢固的地位。尽管实现可能较复杂，但是概念很简单：更改对象属性值，对象本身看起来就会改变。例如，给 x 坐标增加 50 个像素，对象就会向右移动 50 个像素。

SVG 图像具有相同的概念，但实现却简单得多，这是由于这些能力从开始就构建到语言中。SVG 定义了专用于动画的五种元素：

animate：该元素指定一个特定属性（通过 attributeName 属性），其值在 dur 属性指定的时间内从指定为 from 属性的值变成指定为 to 属性的值。repeatCount 属性指定动画发生多少次。要使动画无限运行，请将 repeatCount 的值设置为 indefinite。动画适用于包含它的元素，因此下面的代码：

xml 代码

1. <rect x="50" y="50" width="100" height="100"    
2.                           fill="none" stroke="purple">  
3.     <animate attributeType="CSS" attributeName="stroke-width"    
4.         from="1" to="50" dur="5s" repeatCount="indefinite" />  
5.  rect>  

创建一个正方形，其 stroke-width 逐渐增厚到 50 像素，然后变回到 1 个像素，并再次开始循环。

animateMotion：该元素提供一种通过指定路径移动元素的简单方法。路径数据与路径元素的 d 属性相同，但用路径元素指定。也可以用 xlink:href 将它链接到 animateMotion 元素。起点和终点由 from 和 to 属性确定，并且可以通过将 rotate 值设为 auto 来设置对象垂直对齐于路径。（也可以将 rotate 属性设为 auto-reverse 以将这个方位改变 180 度。或者可以给定一个特定角度）。如动画和交互性所示：

xml 代码

1. <animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"    
2.               dur="8s" repeatCount="indefinite" rotate="auto" />            
3.   
4. animateColor：该元素提供在一段时间内更改元素颜色的方法。例如，要创建一个在 8 秒钟内由红色变成蓝色的圆：   
5.   
6.   <circle cx="250" cy="100" r="50" fill="red">  
7.      <animateColor attributeType="CSS" attributeName="fill"  
8.          from="rgb(255,0,0)" to="rgb(0,0,255)" dur="8s"  
9.          repeatCount="indefinite"/>  
10.   circle>    

11. animateTransform：该元素在一段时间内执行变换。请记住，这些变换影响整个坐标系统，因此简单地缩放一个矩形还会导致矩形位置的变化。下面的示例不但缩放矩形，还逐渐将它返回到类似位置：

       
          <animatetransform fill="freeze" to="3" type="scale" from="1" begin="3s" additive="sum" dur="6s" attributetype="XML" attributename="transform"></animatetransform>
          <animatetransform fill="freeze" to="-222,-45" type="translate" from="0,0" begin="3s" additive="sum" dur="6s" attributetype="XML" attributename="transform"></animatetransform>
      
    
    

    set：剩下的这个元素可以很容易地设置一个元素在指定时间段内的特殊属性。例如：

          
12.   

 

 

事件的脚本编制

<nobr>第 2 页（共2 页）</nobr>

象 HTML 页面一样，可以设置 SVG 图像以捕获某些事件（如点击鼠标和滚动），并用它们启动脚本。在构建简单 SVG 图像时，可以通过属性捕获这些事件。最常用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、 onunload 和 onrepeat。

当这些事件之一被触发，就可以将事件对象本身提供给脚本，脚本反过来再用它确定哪个对象触发了该事件（也就是点击了什么对象）。然后脚本可以操纵那个对象的特性，如它的属性。

这一示例回到了图案示例，但在此例中，当用户点击椭圆时，其填充由白色变为使用图案。

xml 代码

1. xml version="1.0" standalone="no"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">  
5.   <desc>Scripting the onclick eventdesc>  
6.   <defs>  
7.      
8.     <script type="text/ecmascript">    
9.      
10.       function hideReveal(evt) {  
11.         var imageTarget = evt.target;  
12.         var theFill = imageTarget.getAttribute("fill");  
13.         if (theFill == 'white')  
14.           imageTarget.setAttribute("fill", "url(#notes)");  
15.         else  
16.           imageTarget.setAttribute("fill", "white");  
17.       }  
18.     ]]>    
19.     script>  
20.        
21.     <pattern id="notes" x="0" y="0" width="50" height="75"    
22.                    patternTransform="rotate(15)"    
23.                    patternUnits="userSpaceOnUse">  
24.             
25.          <ellipse cx="10" cy="30" rx="10" ry="5"/>  
26.          <line x1="20" y1="30" x2="20" y2="0"    
27.                    stroke-width="3" stroke="black"/>  
28.          <line x1="20" y1="0" x2="30" y2="5"    
29.                    stroke-width="3" stroke="black"/>  
30.          
31.      pattern>  
32.    defs>  
33.   
34.     
35.   <rect x="1" y="1" width="350" height="200" fill="none" stroke="blue"/>  
36.   
37.   <ellipse onclick="hideReveal(evt)" cx="175" cy="100" rx="125" ry="60"    
38.            fill="url(#notes)" stroke="black" stroke-width="5"/>  
39.   
40.   
41. svg>  
42.   
43.