Svg text stroke effect

One 、 effect ：

Two 、 Code ：

only js part

  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() obtain svg Length rounding *//* The length of the dotted line 、 spacing */
        str[i].style.strokeDashoffset = ilengh + 'px';/* Offset ;*/
        console.log(ilengh);
      }

      /* Fill color */
      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);/* Fill in two seconds */
      }

3、 ... and 、 Ideas

The general idea is , Set a dotted line for each word , And make the dotted line offset so that the font is invisible . Add transition to it , Set the offset value to 0, Then the dotted line is visible . Fill each word with color .

step ：

1. Make svg, Go to figma Online production Figma. Write the words you want , Right click Set stroke . Add the color you want to the stroke , Remove the fill color . Right click to copy to svg.
2. hold svg Copy into structure , You can get the words . Each of them path Every word . There are as many words as there are path
3. Traversal array , Get each path. Put their style in stroke-dasharray and stroke-dashoffset Property is set to this path The length of , It can make path The outer contour of is not visible .stroke-dasharray Property is to set the length of the dotted line ,stroke-dashoffest Is to set the offset value of the dotted line . The offset value is exactly the left shift , Negative is right
4. For each path The length of , It's using svg Of getTotalLength( ) Method . For details, please refer to SVG Of getTotalLength(), getPointAtLength() Method introduction _352328759 The blog of -CSDN Blog _gettotallength svg

 5. Set the length of the dashed line equal to the offset value path The length of , This string of words is hidden . Let the offset value be equal to 0, Add a transition , Can achieve the effect of font stroke

6. Last , Call the function in a few seconds , Make this string of words filled with color

Reference resources ：5 Minutes to learn SVG Text stroke animation _ Bili, Bili _bilibili