标签:
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;//虚线的偏移量
}
整个图像看起来完全不是虚线。只需要将stroke-dasharray
属性设置的足够长,超过整个线条的长度。
这样你就看不见图形了。
.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();
标签:
原文地址:http://www.cnblogs.com/echolife/p/4915004.html