1. 首页
  2. 开发

Javascript操作SVG类库Snap.svg:鼠标悬浮SVG动画效果

演示地址:在线演示

基本JS代码如下:

var gsvg = Snap('#svg'),
  pathRectangle = 'M33,0h41c0,0,0,9.871,0,29.871C74,49.871,74,60,74,60H32.666h-0.125H6c0,0,0-10,0-30S6,0,6,0H33',
  curveRectangle = 'M33,0C33,0,74,0,74,0C74,0,79,9.871,79,29.871C79,49.871,74,60,74,60C74,60,32.666,60,32.666,60C32.666,60,32.541,60,32.541,60C32.541,60,6,60,6,60C6,60,11,50,11,30C11,10,6,0,6,0C6,0,33,0,33,0';
 
gsvg.mouseover(function(){
	gsvg.select('path').animate({'path' : curveRectangle}, 1000, mina.elastic); 
	
});
 
gsvg.mouseout(function(){
	gsvg.select('path').animate({'path' : pathRectangle}, 1000, mina.elastic);  
	
});

操作SVG是不是非常简单?

原文地址 http://www.gbtags.com/gb/share/4106.htm

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册