SVG脚本及动画实现

SVG中脚本的实现

SVG中加入脚本时，需要先申明脚本的类别，先加入<script type="application/ecmascript"> 然后写脚本函数

<![CDATA[
 
   function name1(evt){
 
   ...
 
    }
 
   function name2(evt){
 
   ...
 
   }
 
   ...
 
 ]]></script>

 

 

在SVG脚本中可以通过id来查找element，函数getElementById

 例子：var text=document.getElementById("text1"); 查找id为text1的text

然后可以设置text的属性

text.setAttribute("opacity","0"); 设置text为不可见

 

需要注意的是，脚本中一旦有一个函数有语法错误，余下的函数不能正常执行，前面的函数可以执行。

 

SVG中动画的实现

SVG中动画有很多实现的方法，<animate> <set> <animateMotion>等。我介绍一下比较实用的<animateMotion>

例子:让一个图片沿三角形移动循环往复。

 

  <image xlink:href="1s.jpg" width="150" height="150">
  <animateMotion dur="6s" repeatCount="indefinite"
    path="M 600,200 500,300 700,300 600,200"/> 
 </image>

 

 

三角形路径定义为path="M 600,200 500,300 700,300 600,200"

M表示移动，(600,200) (500,300) (700,300)是三角形三个顶点，前面不加字母的话默认和前面一样的M

dur表示一个循环持续时间， repeatCount表示循环次数，这里设为无限次。

 

 

值得注意的是，firefox貌似不支持SVG的动画元素，不过貌似在下个版本中会有支持，所以内嵌动画的SVG就不要在FF上显示了，可以用Chrom显示。