利用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>