GIF和SVG不是同一种图片来的，如果要点击后gif才动需要一张静态图片，并且需要做框/需要一个模版按钮，当这个被点击的element的id是a，动态的图片是id=b，则：
var clickElement = document.getElementById('a')var imageElement = document.getElementById('b')
clickElement.addEventListener('click',clickFunction)//添加点击事件
function clickFunction(){
clickElement.removeEventListener('click')//清除事件绑定
imageElement.setAttribute('src','PATH_TO_FILE/FILENAME.EXT')//更换IMAGE标签图片src属性
}
我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等)，直接用canvas中的drawImage方法即可，那么如何绘制动态图片（gif）？
相信大家都知道动态图片之所以动态，是因为它是由很多图片按一定的帧数顺序播放而成的，因此我们是否也可以模拟这样的帧数，每隔一定的时间重新
绘制图片，就能画出动态图片呢？答案当然是YES。下面就是我自己测试的一个例子，代码如下：
<!DOCTYPE HTML>2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>canvas上画动态图，视频也可以画</title>
6
7 <script type="text/javascript">
8 window.onload = function() {
9 var img = document.getElementById('img1')
10 var can = document.getElementById('can')
11 var cxt = can.getContext('2d')
12
13
14 setInterval(function (){cxt.drawImage(img, 0, 0)}, 20)
15 }
16 </script>
17 </head>
18
19 <body>
20 <p>准备绘制的动态图片:</p>
21 <img id="img1" src="ex.gif" alt="你的浏览器不支持img标签"></img>
22 <p>canvas画布上绘制的动态图片:</p>
23 <canvas id="can" width="800px" height="600px" style="background-color: #CCCCCC">你的浏览器不支持canvas标签</canvas>
24 </body>
25 </html>
如果你要动态换，写一个方法，重新替换不就好了，要什么图片换什么！希望5itjob能帮到你
