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

阅读更多
文章标签: null url path function
个人分类: 技术
上一篇用C++重写了OPENCV SURF算法例子
下一篇HTML5 拼图游戏
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭