svg实现文字笔画流动效果

背景：

前段时间着手某一项目时UI提出实现文字笔画流动效果的需求，故在github和gitee上寻找灵感，最后从一位学长的项目中找到了实现方法，感觉收获颇多，特此记录。

---

解决方案：

搭建svg基本的html结构：

<div class="container">
    <svg viewBox="0 0 1000 300">
      <symbol id="line-text">  <!--symbol用来创建模板，通过use实例化-->
        <text text-anchor="middle" x="50%" y="50%">ABCDEFG</text>
        <!--x和y指定锚点位置，text-anchor确定文本相对于锚点的对齐位置-->  
      </symbol>
      <!--以下四个use对应了每个文字中对应的四段虚线-->
      <use href="#line-text" class="text"></use>
      <use href="#line-text" class="text"></use>
      <use href="#line-text" class="text"></use>
      <use href="#line-text" class="text"></use>
    </svg>
  </div>  

通过css3动画实现文字笔画流动效果：

<style>
    .container {  /*svg外层容器*/
      height:150px;
      width:500px;
      margin:0 auto;
    }
    .text { /*内部填充fill和外轮廓stroke属于svg属性而非css，但css中text-fill开头和text-stroke开头的属性能够实现类似效果*/
      font-size: 140px;
      font-weight: bolder;
      fill: none;  /*文字内部填充为空*/
      stroke-width: 5;   /*外轮廓线的宽度*/
      stroke-dasharray: 0 240;  /*定义外轮廓虚线的长度和间隔的循环单位*/
    }

    /*定义动画*/
    @keyframes text1 {
      100% {
        stroke-dashoffset: 1000;
        stroke-dasharray: 60 180;
      }
    }
    @keyframes text2 {
      100% {
        stroke-dashoffset: 1060;
        stroke-dasharray: 60 180;
      }
    }
    @keyframes text3 {
      100% {
        stroke-dashoffset: 1120;
        stroke-dasharray: 60 180;
      }
    }
    @keyframes text4 {
      100% {
        stroke-dashoffset: 1180;
        stroke-dasharray: 60 180;
      }
    }

    /*调用动画*/
    .text:nth-child(4n + 1) {
      stroke: rgb(179, 157, 250);
      animation: text1 4s 1s ease-in-out forwards;
    }
    .text:nth-child(4n + 2) {
      stroke: rgb(198, 209, 79);
      animation: text2 4s 1s ease-in-out forwards;
    }
    .text:nth-child(4n + 3) {
      stroke: rgb(94, 167, 254);
      animation: text3 4s 1s ease-in-out forwards;
    }
    .text:nth-child(4n + 4) {
      stroke: rgb(107, 235, 203);
      animation: text4 4s 1s ease-in-out forwards;
    }
  </style>

学海无涯，长路漫漫啊