大佬教程收集整理的这篇文章主要介绍了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" onmouSEOver="onOverImg(event)" onmouSELEave="onLeaveImg(event)" ></image> </svg>
var imgElement = document.getElementById("img_img");
imgElement.setAttribute("xlink:href","img/gps_off.png");
<!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" onmouSEOver="onOverImg(event)" onmouSELEave="onLeaveImg(event)" ></image> </svg> </body> </html>
以上是大佬教程为你收集整理的HTML5学习之路--SVG配合js制作动画全部内容，希望文章能够帮你解决HTML5学习之路--SVG配合js制作动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。