svg的stroke-dasharray及stroke-dashoffset属性

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
//width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
//cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。
//r 属性定义圆的半径
//stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。
//fill 属性设置形状内的颜色。我们把填充颜色设置为红色

stroke-dasharray属性用来设置描边的点划线的图案范式。就是设置实线和虚线的宽度。即有或者没有线段的长度。
stroke-dashoffset则指定了dash模式到路径开始的距离。
我们可以设置stroke-dashoffset与stroke-dasharray相同的值实现“画线”的效果

<svg width='200' height='200' xmlns="http://www.w3.org/2000/svg" style='margin-left: 100px;margin-top: 50px'>
    <rect width="100" height="100" stroke-width='3' stroke='#fff' class='haha'></rect>
</svg>
.haha{
    stroke-dasharray: 100px, 100px;
    stroke-dashoffset: 0%;
}

效果预览：

所以可以通过控制stroke-dashoffset的值大于线段的长度，来达到‘绘图’的效果。

//从
.haha{
    stroke-dasharray: 400px;
    stroke-dashoffset: 400px;
}
//到
.haha{
    stroke-dasharray: 400px;
    stroke-dashoffset: 0;
}
//变化的过程就是实现了绘图的过程。