SVG动画效果

416 阅读2分钟

最近这两天研究了SVG图形画法,SVG动态图是怎么呈现出来的。

比较关注stroke-dashoffset 和stroke-dasharray 这两个属性

 stroke-dasharray:用于创建虚线,之所以后面跟的是array的,是因为值其实是数组

stroke-dasharray = '10'
stroke-dasharray = '10, 5'
stroke-dasharray = '20, 10, 5'


 stroke-dashoffset: offset:偏移的意思。

这个属性是相对于起始点的偏移,正数偏移x值的时候,相当于往左移动了x个长度单位,负数偏移x的时候,相当于往右移动了x个长度单位。
需要注意的是,不管偏移的方向是哪边,要记得dasharray 是循环的,也就是 虚线-间隔-虚线-间隔


上图效果分别是:
1.没有虚线
2.stroke-dasharray="3 1" ,虚线没有设置偏移,也就是stroke-dashoffset值为0
3.stroke-dashoffset="3",偏移正数,虚线整体左移了3个单位,图中3后面的红线段,就是起始线段,线段之后是1个单位的间隔,我们可见区域从这个间隔开始,然后循环 3-1,3-1的虚线-间隔-虚线-间隔
4.stroke-dashoffset="-3",偏移负数,虚线整体右移动了3个单位,由于dasharray 是循环的,前面偏移的位置会有dasharray 填充上
5.stroke-dashoffset="1",偏移正数,虚线整体左移了1个单位,最终呈现出来的效果跟 线段4 一样

利用这两个属性可以画出好看的动态效果图

贴上代码示例:

<!DOCTYPE html> 

<html>

 <style>

 .text{ stroke: #F60A0A; animation: stroke 10s ; animation-iteration-count:infinite; animation-delay:0s; } 

 @keyframes stroke { 100% { stroke-dashoffset: 100; stroke-dasharray: 5 5; } } 

 </style> 

<body>

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

 <polyline class="text" points="0,40 40,40 " style="fill:white;stroke:red;stroke-width:4 stroke-dashoffset: 0;stroke-dasharray: 300 0;" /> 

</svg> 

 </body> 

</html>