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");

以下是完整的html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function onOverImg(e) {
				var imgElement = document.getElementById("img_img");
				imgElement.setAttribute("xlink:href", "img/gps_on.png");
				imgElement.setAttribute("height", "140px");
				imgElement.setAttribute("width", "140px");
				imgElement.setAttribute("x", "30px");
				imgElement.setAttribute("y", "30px");
			}

			function onLeaveImg(e) {
				var imgElement = document.getElementById("img_img");
				imgElement.setAttribute("xlink:href", "img/gps_off.png");
				imgElement.setAttribute("height", "100px");
				imgElement.setAttribute("width", "100px");
				imgElement.setAttribute("x", "50px");
				imgElement.setAttribute("y", "50px");
			}
		</script>
	</head>
	<body>
		<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>
	</body>
</html>

原文链接：https://blog.csdn.net/tomatomas/article/details/50435720