本文正在参加「金石计划」
前言
首先，SVG 是什么？
SVG 是指可缩放矢量图形（Scalable Vector Graphics，SVG），基于 XML 标记语言，可以用于描述二维的矢量图形。显而易见，SVG 格式提供的是矢量图，因此图片可以被无限放大而不失真或降低质量，并且可以方便地修改内容和进行定制化开发。
在前端开发工作中，我们可以使用自定义的 SVG 图标实现进度条效果、图标按钮效果等。而本文中介绍的是SVG的路径描边动画和文字描边动画效果。
stroke-dasharray & stroke-dashoffset
在之前的文章中，我们借助 stroke-dasharray 和 stroke-dashoffset 实现了环形进度条效果。文中我们只是简单了解了下如何去使用这两个属性。而实际上，这两个属性的取值有多种设置方式。
1、stroke-dasharray 属性可控制用来描边的点划线的图案范式。其属性值是一个 length 和 percentage 数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。
举个例子，一条200px的线，stroke-dasharray为200，表示先画200px实线，紧接着是200px空白，然后又是200px实线，接着是200px空白...
2、stroke-dashoffset 属性指定了 dash 模式到路径开始的距离。
举个例子，当属性值为正整数 x 时，表示整体向左平移了 x 像素。
不同的取值会有不同的展示效果，示例代码如下所示：
<p>1. stroke-dasharray demo:</p>
<svg width="200" height="100" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
<line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" />
<line stroke-dasharray="20, 5" x1="10" y1="50" x2="190" y2="50" />
</svg>
<p>2. stroke-dashoffset demo:</p>
<svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line stroke-dasharray="20, 5" stroke-dashoffset="0" x1="10" y1="10" x2="190" y2="10" />
<line stroke-dasharray="20, 5" stroke-dashoffset="10" x1="10" y1="30" x2="190" y2="30" />
</svg>
<style>
line{
stroke: black;
stroke-width: 2;
}
</style>
最终效果如下：
路径描边动画
这里，我们用 path 路径元素画一个苹果：
<!--素材来源：https://www.nihaoshijie.com.cn/mypro/svg/svg2/buluo.html-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id="path2" stroke="#000" stroke-width="2" fill="none" d="M338,132c53.094-1.055,80.442,15.317,103,44c0,1.333,0,2.667,0,4c-40.96,30.44-66.713,87.897-34,147 c6.417,11.595,21.062,26.807,32,34c5.333,2.667,10.667,5.333,16,8c-4.646,40.842-57.294,115.573-94,124 c-31.519,7.236-54.682-11.118-77-16c-37.039-8.102-61.021,12.37-87,18c-35.953,7.792-63.181-27.32-76-45 c-59.011-81.386-102.75-270.669,25-313c37.527-12.435,76.171,6.998,106,13C271.355,153.895,325.573,138.184,338,132z"></path>
<path id="path3" stroke="#000" stroke-width="2" fill="none" d="M344,26c3.595,1.373,3.172,0.899,5,4c16.619,39.859-50.248,119.052-93,107c-0.572-46.929,22.555-81.661,53-98 C320.666,34.667,332.334,30.333,344,26z"></path>
</svg>
<style>
svg {
position: absolute;
width: 100%;
height: 100%;
}
</style>
为了实现描边动画，我们给 path 元素设置 animation 属性，在 1.5s 内 stroke-dasharray 属性从0 1334变化到1334 1334，最终效果如下：
文字描边动画
对于 text 元素，我们也能实现描边效果。在下面的代码中，text-anchor 表示居中对齐（text的中线对齐svg的中线），此外还可以取值 start 和 end。
我们通过调整 stroke-dasharray的属性值，可以看到不同的展示效果。
<svg width="500" height="100" viewBox="0 -20 500 100">
<text text-anchor="middle" x="50%" y="50%" class="text1">
稀土掘金
</text>
</svg>
<style>
.text1{
font-size: 64px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke: #3498db;
stroke-width: 2px;
stroke-dasharray: 300 10;
animation: stroke1 6s infinite linear;
}
.text2{
stroke-dasharray: 90 310;
}
@keyframes stroke1 {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -400;
}
}
</style>
此外，我们通过设置不同的描边颜色stroke 和 animation-delay，可以展示霓虹灯文字效果~
最终效果如下：
