码迷,mamicode.com
首页 > Web开发 > 详细

html5 svg动画

时间:2015-10-27 20:01:01      阅读:383      评论:0      收藏:0      [点我收藏+]

标签:

http://www.zhangxinxu.com/sp/svg/

以上是svg的一个线上编辑器,也可以adobe Illustrator制作生成。

 

我们通过以上编辑器可以获得以下代码。

例:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<path class="path1" fill="#FF0000" stroke="#000000" stroke-width="5" d="m359,273l-179,18l293,82l1,-193l-131,16l16,77z" id="svg_10"/>
</g>
</svg>

 

给路径path 添加 class 为 path1

.path1 {
  stroke-dasharray: 20;   //表示虚线描边 该属性把线段变成虚线  数值越大 虚线里每个线段的长度越长
 
stroke-dashoffset: 1000;//虚线的偏移量
}

1.当虚线的小线条足够长,超过图形的整个线条长度时,图像没有什么变化

整个图像看起来完全不是虚线。只需要将stroke-dasharray属性设置的足够长,超过整个线条的长度。

2. 给线条设置偏移量,让它不再覆盖整个图形。

这样你就看不见图形了。

3. 动态地慢慢将线条的偏移量设置回归到0

.path1 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

通过以上代码可以完成图片动画出现

设置css时可能不知道图形的长度,这个时候通过以下js就可以获取path的长度
var path = document.querySelector(‘.path‘); var length = path.getTotalLength();
 

 

html5 svg动画

标签:

原文地址:http://www.cnblogs.com/echolife/p/4915004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!