SVG 边框 (stroke) 基本知识以及 SVG 边框动画

最近做了一个关于SVG的应用的技术分享网站svgtrick.com，会同步一些文章到这里来，更多的关于SVG方面的技术知识可以去网站看看。

在SVG中边框这一属性虽然看似简单，但实则是大有天地，今天就来深扒下SVG中的边框的一些基础知识。

基本知识

在SVG中，边框最常见的应用就是用来指定路径或者是其它形状的边框的颜色以及宽度。使用方法跟CSS差不多，比如：

<svg viewBox="0 0 300 10">
    <line x1="0" y1="0" x2="300" y2="0" 
    stroke="black" stroke-width="10" />
</svg>

上面就指定来这条直线边框的颜色是黑色以及它的宽度为10像素。

虚线(stroke-dasharray)

在SVG中也可以像CSS中那样指定边框为虚线要用到属性stroke-dasharray。troke-dasharray属性的参数，是一组用逗号分割的数字组成的序列。需要注意的是，这里的数字必须用逗号分割，虽然也可以插入空格，但是数字之间必须用逗号分开。每一组数字，第一个用来表示实线，第二个用来表示空白。

<svg viewBox="0 0 300 10">
    <line x1="0" y1="0" x2="300" y2="0" 
    stroke="black" stroke-width="10"  stroke-dasharray="5" />
</svg>

上面只有一个数字5，则表示会先画5px实线，紧接着是5px空白，然后又是5px实线，从而形成虚线。如果你想要更复杂的虚线模式，你可以定义更多的数字，比如：

<svg viewBox="0 0 300 10">
<defs>    
    <style>
        line#es {
            stroke: black;
            stroke-width: 5;
            stroke-dasharray: 5,20;
        }
    </style>
</defs>    
    <line id="es" x1="0" y1="0" x2="300" y2="0" />
</svg>

上面代码表示会先画5px实线，紧接着是20px空白，然后又是5px实线，从而形成虚线。

如果是三个数字呢：

<svg viewBox="0 0 300 10">
<defs>    
    <style>
        line#es {
            stroke: black;
            stroke-width: 5;
            stroke-dasharray: 5,20,5;
        }
    </style>
</defs>    
    <line id="es" x1="0" y1="0" x2="300" y2="0" />
</svg>

这种情况下，数字会循环两次，形成一个偶数的虚线模式。所以该路径首先是5px实线，然后是20px空白，然后是5px实线，接下来循环这组数字，形成5px空白、20px实线、5px空白。然后这种模式会继续循环。

storke-dashoffset

stroke-dashoffset，定义虚线开始的位置。

line#dashstart {
    stroke: black;
    stroke-width: 5;
    stroke-dasharray: 5, 20, 5;
    stroke-dashoffset: 20;
}

上面代码就定义里虚线是从20px像素的位置开始的。

让线动起来

利用storke-dashoffset和stroke-dasharray再配合CSS3的animation就可以让SVG线条产生像手画出来一样的动画效果。

来先看一张图：

当我们有一段长度为300的线条时，我们指定它的storke-dashoffset的值跟它的stroke-dasharray的值一样，这时候线条时从300像素的开始绘制，而我们整个的线条也只有300像素，所以这个时候线条时不可见的。而当我们指定storke-dashoffset的值从300慢慢的变化到0的时候，则线条也会从0的位置从新开始绘制，所以就像手画出来一样。配合CSS3就可以模拟实现手绘的动画效果。

@keyframes strokeanim {
    to { stroke-dashoffset: 0; }
}
line#dashstart {
    stroke: hsl(260, 50%, 30%);
    stroke-width: 15;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: strokeanim 2s alternate infinite;
}

如下图所示：

利用这个可以制造很多有趣的动画效果。

比如在SVG中有各种各样的形状，下面就以矩形为例，结合上面说的方法，可以实现下面的动画效果：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<style type="text/css">
@keyframes marchingants {
    to { stroke-dashoffset: 19; }
}
rect#strokedrect {
    stroke: hsl(260, 50%, 90%);
    fill: white;
    stroke-width: 7;
    stroke-dasharray: 10;
    animation: marchingants 1s forwards infinite linear;
}
</style>
    <rect id="strokedrect" x="0" y="0" width="300" height="200" />
</svg>

如下图所示：

本文中的实例主要来自于这篇文章原文地址有删减。