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显示。