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>

以下图所示：

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