HTML5学习之路--SVG配合js制作动画

如果开发中需要用到与用户交互的动画。例如当用户鼠标移到页面某个控件上，该控件会产生相应的变化。那么此时可以使用svg标签与js脚本实现动画的制作。

因为svg中包含的各个部分都可以独立响应用户的操作，所以可以直接在对象上加响应函数。如下面image中的onmouseover函数。

    <svg width="200px" height="200px">
	<image id="img_img" xlink:href="img/gps_off.png" x="50" y="50"
		height="100px" width="100px" οnmοuseοver="onOverImg(event)"
		οnmοuseleave="onLeaveImg(event)" ></image>
    </svg>

然后我们只需要在js代码中定义响应函数，修改该对象的属性即可：

var imgElement = document.getElementById("img_img");
imgElement.setAttribute("xlink:href", "img/gps_off.png");