前言

SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义图像。
在 Html 中，使用标签<svg></svg>来描述一个 SVG 图形，不会因为放大而牺牲该图形质量。由于不同的描述方法，SVG 图形通常比 JPG 格式小，尽管描述图形的代码有时候会很长。
由于 SVG 格式额外记录了该图形的作画步骤，我们可以用它实现一些有趣而又绚丽的效果

\<svg\>属性

在 Html 中，\<svg\>主要有以下几种属性:

属性	描述
fill	填充部分的颜色
fill-opacity	填充部分的不透明度，从0（完全透明）到1（完全不透明）
stroke	轮廓部分的颜色
stroke-opacity	轮廓部分的不透明度，从0（完全透明）到1（完全不透明）
stroke-width	轮廓部分的宽度
stroke-dasharray	用于创建虚线，第奇数个数描述实线的长度，第偶数个数描述空格的长度，若设定的值为奇数个，则会重复一遍以变成偶数个
stroke-dashoffset	虚线绘制的偏移量

效果：描边

有时候，我们希望体现出加载的感觉。这时候，描边便能在视觉上达到这种效果。
在完成这种效果的过程中，重点需要用到stroke-dasharray和stroke-dashoffset属性。

• 当stroke-dasharray和stroke-dashoffset设置得足够大时（准确地说，是大于等于 SVG 的 path 总长），整个图形的轮廓会全部变为虚线的空格段。再通过 CSS 动画@keyframes逐渐使stroke-dashoffset属性值减小至0，便可达到描边的效果。如下：

  #a{
    width: 100px;
    height: 100px;
    fill: none;
    stroke: black;
    stroke-width: 5px;
    stroke-dasharray: 5677.25390625;
    animation: outline_a 2s infinite;
  }
  @keyframes outline_a{
    0%{
        stroke-dashoffset: 5677.25390625;
    }100%{
        stroke-dashoffset: 0;
    }
  }

  效果：

• 在以上基础上，在描边动画结束后，再使填充部分逐渐显现，如下：

  #b{
    width: 80px;
    height: 80px;
    fill:#151513;
    color:white;
    stroke-dasharray: 859.9161987304688;
    animation: outline_b 2s infinite;
  }
  @keyframes outline_b{
    0%{
        stroke: black;
        stroke-width: 2px;
        stroke-dashoffset: 859.9161987304688;
        fill-opacity: 0;
    }80%{
        stroke-width: 2px;
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }100%{
        stroke: black;
        stroke-width: 0;
        fill-opacity: 1;
    }
  }

  效果：

  请注意，有些\<svg\>本身并没有描述stroke和stroke-width属性。要想勾勒轮廓，最好在动画开始时描述，并在动画结束后恢复初始值，以避免非预想的结果。

• 同样的方法也可以用于彩色的\<svg\>，如下：

  #c{
    width: 500px;
    height: 500px;
    stroke-dasharray: 1000;
    animation: outline_c 4s linear infinite;
  }
  @keyframes outline_c{
    0%{
        stroke: gray;
        stroke-dashoffset: 1000;
        fill-opacity: 0;
    }
    60%{
        stroke-width: 2px;
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }
    100%{
        stroke: gray;
        stroke-width: 2px;
        fill-opacity: 1;
    }
  }

  效果：

  素材来源https://www.iconfont.cn/

  当\<svg\>的 path 很多时，可以随意设置stroke-dasharray或自行调整为合适的值。

技巧

• 如何获取 SVG 的 path 长度

  svg = document.querySelector("#a svg");
  length = svg.getTotalLength();

  其中""内与 CSS 选择器语法相同。
  将以上代码在浏览器的控制台中运行即可。