利用SVG clip-path显示动画图片

利用SVG clip-path显示动画图片

需求：手头的动画资源大部分为同一图片的动画集合，而SVG中没有能够直接利用的办法
解决方法：将图片显示在SVG中，并根据帧数，动态生成clip-path，选择需要的部分，并根据选择部分的偏移量动态修改SVG图片的坐标，实现动画效果

 var flag=0;
 function onCircleClick(evt)
 { var sprite = document.getElementById("sprite");
  if(flag == 0)
  {
   sprite.setAttributeNS(null,"x", "300");
   sprite.setAttributeNS(null,"clip-path", "url(#MyClip2)");
   flag = 1;
  }
  else 
  {
   sprite.setAttributeNS(null,"x", "350");
   sprite.setAttributeNS(null,"clip-path", "url(#MyClip1)");
   flag = 0;
  }
 } 

 

<svg id="svg" style="position:absolute" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" pointer-events="none">
 <defs>
 <clipPath id="MyClip1" >
      <path d="M 370 270 l 60 0 l 0 60 l -60 0 Z" />
   </clipPath>
   <clipPath id="MyClip2" >
      <path d="M 385 270 l 60 0 l 0 60 l -60 0 Z" />
   </clipPath>
 </defs>
 <image id="sprite" onclick="onCircleClick(evt)" clip-path="url(#MyClip1)" x="350" y="270" width="500" height="60" pointer-events="all"

xlink:href="res/sprite.png"></image>
</svg>