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

原创 2012年03月29日 14:18:36

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

相关文章推荐

Flex :自定义Loading载入状态(含图标) 及解决Flex中GIF动画图片加载时显示动起来

自定义Flex加载的原理就是继承mx.preloaders.DownloadProgressBar类..然后重写相关的方法但发现一个严重问题,原来会动的图片在FLEX里不动了,使用Image和SWFL...
  • crurtyx
  • crurtyx
  • 2011年08月30日 10:56
  • 597

android fragment 显示ListView,并可以添加动画图片

主要流程: Activity

对话框中显示GIF动画图片

  • 2016年01月04日 16:53
  • 162KB
  • 下载

CSS和SVG中的剪切——clip-path属性和<clipPath>元素

本文由大漠根据SaraSoueidan的《Clipping in CSS and SVG – The clip-path Property and Element》所译,整个译文带有我们自己的理...
  • jdz321
  • jdz321
  • 2014年08月08日 11:22
  • 470

关于Unity如何创建静态动画图片

1.先创建一个图片 2.选中这个图片,选择Window窗口 3.打开window下的Animation 4.然后点击创建一个新的Animation动画文件 5....
  • WZH_YBW
  • WZH_YBW
  • 2016年11月11日 16:25
  • 105

Delphi 自带GIF控件的动画图片加载和播放

delphi从CodeGear时期就已经将网上广为流传的TGIFImage控件(源文件名是GIFImage.pas)集成到VCL中,使用方法与原版的TGIFImage存放轻微差别, 首先引用单元...

CSS3动画图片旋转与3d硬件加速

Document /* css3 让一个图片不断翻转示例代码 */ #gavinPlay{ /* background:color u...

替换recovery动画图片

转自 http://qiushao.net/2015/12/20/replace_android_recovery_picture/ 替换recovery动画图片 最近在做一个项目是and...

前端设计必会技能-gif动画图片制作

前端设计必会技能-gif动画图片制作 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com...

纯css动画图片相册

body{ background-color: #7CFC00; margin: 0; padding: 0; animation:myfirst 15s; -moz-animation:m...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用SVG clip-path显示动画图片
举报原因:
原因补充:

(最多只允许输入30个字)