svg文字描边效果

一、效果：

二、代码：

仅js部分

  let str = document.querySelectorAll('.bless path');
      for (let i = 0; i < str.length; i++) {
        let ilengh = parseInt(str[i].getTotalLength());
        str[i].style.strokeDasharray = ilengh + 'px';/*getTotalLength()得到svg长度取整*//*虚线长度、间距*/
        str[i].style.strokeDashoffset = ilengh + 'px';/*偏移量;*/
        console.log(ilengh);
      }

      /*填充颜色*/
      function fill() {
        for (let i = 0; i < str.length; i++) {
          str[i].style.fill = '#f6d51e';
        }
      }

      for (let i = 0; i < str.length; i++) {
        str[i].style.strokeDashoffset = 0;
        str[i].style.transition = '2s all';
        setTimeout('fill()', 2000);/*两秒后填充*/
      }

三、思路

总体思路就是，给每一个字设置虚线，并让虚线偏移使得字体就看不见。再给其加上过渡，使偏移值为0，那么虚线就可见了。再给每个字填充上颜色。

步骤：

1. 制作svg，去figma在线制作Figma。写好自己想要的文字，右击设置描边。给描边添加上自己想要的颜色，把填充色去掉。右击复制到svg。
2. 把svg复制到结构内，就能得到文字了。其中每个path就是每个字。有多少个字就有多少个path
3. 遍历数组，得到每个path。把他们的样式中的stroke-dasharray 和 stroke-dashoffset属性设置成该path的长度，就可以使得path的外轮廓线不可见。stroke-dasharray属性是设置虚线的长度，stroke-dashoffest是设置虚线的偏移值。偏移值正是左移，负是右
4. 获取每个path的长度，是使用svg的getTotalLength( )方法。具体可参考SVG 的 getTotalLength(), getPointAtLength() 方法简介_352328759的博客-CSDN博客_gettotallength svg

 5.设置虚线长度于偏移值等于该path的长度，这一串字就隐藏起来了。再让偏移值等于0，加个过渡，就能实现字体描边的效果

6.最后，再过几秒调用函数，使得这一串字填上颜色

参考：5分钟学会SVG文字描边动画_哔哩哔哩_bilibili