关闭

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

标签: nullurlpathfunction
3299人阅读 评论(0) 收藏 举报
分类:

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:420552次
    • 积分:4873
    • 等级:
    • 排名:第6064名
    • 原创:66篇
    • 转载:0篇
    • 译文:12篇
    • 评论:242条
    文章分类
    最新评论