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

基于clip-path的任意元素的碎片拼接动效

Title .clip[style] { opacity: 0; } .active .clip:not([style...
  • txl910514
  • txl910514
  • 2016年07月07日 17:31
  • 386

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

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

CSS3/SVG clip-path路径剪裁遮罩属性简介

CSS3/SVG clip-path路径剪裁遮罩属性简介 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhan...
  • ITX2000
  • ITX2000
  • 2015年02月12日 12:02
  • 726

SVG小记——入门,clipPath

SVG是可缩放矢量图形 SVG用来定义用于网络的基于矢量的图形 SVG使用XML格式定义图形 SVG图像在放大或缩小(改变尺寸)的情况下,其图形质量不会受受损失 SVG是W3C的一个标准 ...
  • leo8729
  • leo8729
  • 2015年09月14日 13:40
  • 816

CSS中的路径裁剪样式clip-path

前面的话   CSS借鉴了SVG裁剪的概念,设置了clip-path样式,本文将详细介绍路径裁剪clip-path   概述   clip-path属性可以防止部分元素通过定义的剪切区域来显示...
  • nobb111
  • nobb111
  • 2017年09月13日 20:38
  • 321

用CSS3的clip-path样式进行图片的裁剪

1.兼容性 不支持IE和Firefox,支持webkit浏览器。注意,在现代浏览器中需要使用-webkit-前缀。 2.使用方法 1.裁剪三角形 元素的左上角为(0 0);poly...
  • huangpb123
  • huangpb123
  • 2016年10月09日 14:30
  • 1380

SVG 剪裁与蒙版(clipPath & mask)

简介参考MDN https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath The SVG element defines...
  • chy555chy
  • chy555chy
  • 2016年12月08日 17:16
  • 769

Android自定义动画三-SVG动画

Android自定义动画三-SVG动画 本篇文章主要是对SVG的一个介绍和使用,以及Android中对SVG的一个支持,从而可以帮助我们在android下很轻松的通过SVG实现一些非常酷炫的动画效...
  • u013703461
  • u013703461
  • 2017年07月01日 22:51
  • 1240

CSS3:clip-path详解

我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果。显...
  • u011043843
  • u011043843
  • 2015年07月07日 11:31
  • 1298

css3clip-path绘制正八边形

做微信H5项目,不可避免的要碰到使用用户头像的情况,而设计师为(cong)了(bu)追(kao)求(lv)美(qian)观(duan)也总是会出一些五花八门的头像框设计稿。虽然我觉得圆形就挺好看的。。...
  • Elephant_H
  • Elephant_H
  • 2017年08月16日 15:52
  • 459
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用SVG clip-path显示动画图片
举报原因:
原因补充:

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