html5 svg动画

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();