[CSS] svg线条动画

1. svg坐标系统

对于所有元素，SVG使用的坐标系统或者说网格系统，
和Canvas用的差不多（所有计算机绘图都差不多）。

这种坐标系统是：
以页面的左上角为(0,0)坐标点，坐标以像素为单位，
x轴正方向是向右，y轴正方向是向下。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="10" width="70" height="50" fill="#999"/>
</svg>

<style>
    svg{
        background: #ccc;
    }
</style>

我们使用div+css可以实现相似的效果，

<div>
    <span></span>
</div>

<style>
    div{
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
    }

    div span {
        left: 20px;
        top: 10px;
        width: 70px;
        height: 50px;
        position: absolute;
        background: #999;
    }
</style>

2. viewBox

svg的viewBox属性，
可以截取svg中的一块矩形区域，然后居中展示在原来的svg中。

viewBox = "开始x坐标 开始y坐标 截取宽度 截取高度"

例如，我们将上面的图形，从0,0坐标点开始，截取宽高为50,50的一块区域。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
    <rect x="20" y="10" width="70" height="50" fill="#999"/>
</svg>

<style>
    svg{
        background: #ccc;
    }
</style>

viewBox允许截取比原来svg区域更大的范围，
这样可以实现缩小原svg内图形的效果。
例如，我们截取宽高为200,200的一块矩形区域。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <rect x="20" y="10" width="70" height="50" fill="#999"/>
</svg>

<style>
    svg{
        background: #ccc;
    }
</style>

3. line

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="70" y2="90" />
</svg>

<style>
    svg{
        background: #ccc;
    }

    svg line{
        stroke: #999;
        stroke-width: 4;
        fill: none;
    }
</style>

其中，x1,y1表示初始坐标，x2,y2表示终止坐标。

4. stroke-dasharray

通过给line设置stroke-dasharray，可以绘制虚线。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="70" y2="90" />
</svg>

<style>
    svg {
        background: #ccc;
    }

    svg line {
        stroke: #999;
        stroke-width: 4;
        fill: none;

        stroke-dasharray: 10;
    }
</style>

其中，stroke-dasharray: 10;相当于stroke-dasharray: 10 10;，
表示绘制line的时候，以实线10px，空白10px的间距来画虚线。

下图是指定，stroke-dasharray: 10 2;的效果。

5. stroke-dashoffset

通过给line设置stroke-dashoffset，
可以指定绘制虚线时的起始位置偏移。

下图向前偏移了9px，

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="70" y2="90" />
</svg>

<style>
    svg {
        background: #ccc;
    }

    svg line {
        stroke: #999;
        stroke-width: 4;
        fill: none;

        stroke-dasharray: 10 2;
        stroke-dashoffset: 9;
    }
</style>

以上代码指定了stroke-dashoffset: 9;，则向前偏移9px再开始绘制虚线。
可以看到实线部分，只剩下了1px。

6. 动画

结合stroke-dasharray和stroke-dashoffset可以给line增加描线效果的动画。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="70" y2="90" />
    <line x1="10" y1="10" x2="70" y2="90" />
</svg>

<style>
    svg {
        background: #ccc;
    }

    svg line {
        stroke: #999;
        stroke-width: 4;
        fill: none;

        stroke-dasharray: 100;
    }

    svg line:fisrt-child{
        stroke-dashoffset: 0;
    }

    @keyframes depict {
        from {
            stroke: red;
            stroke-dashoffset: 100;
        }
        to {
            stroke: red;
            stroke-dashoffset: 0;
        }
    }

    svg line:last-child{
        stroke-dasharray: 100;
        animation: depict 2s linear 0s 1 normal forwards;
    }    
</style>

我们使用了css动画，动态改变了stroke-dashoffset的值，从100到0，
stroke-dashoffset: 100;时，刚好红线处于虚线的空白间隙中，
而随着stroke-dashoffset减少到0，偏移值越来越小，前面的实线部分就慢慢显现出来了。

注：
stroke-dasharray: 100;是经过计算过的，我们的例子中，线条的长度刚好是100。

参考

mdn: 坐标定位
 mdn: stroke-dasharray
mdn: stroke-dashoffset
mdn: viewBox

最后编辑于：2018.08.25 10:30:57