最近项目里面用到了这个文字路径动画，不得不说确实挺好玩的，如果有需要的小伙伴可以参考！

由于公司之前项目里也用到过，但是我是第一次写，所以第一时间还是先看看前辈是怎么处理的，借鉴一下长长经验哈哈，所以就找到了这个svg文字路径，上代码
(gif中第一个文字路径1)

<svg
      id="textPathDemo"
      class="round-text"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="500"
      viewBox="0 0 500 500"
    >
      <path
        id="text-path1"
        class="text-path"
        d="M40 12 H200 A28 28 0 0 1 226 40  V305 A28 28 0 0 1 200 332 H40 A28 28 0 0 1 12 306 V40 A28 28 0 0 1 40 12 H200 A28 28 0 0 1 226 40 V305 A28 28 0 0 1 200 332 H40 A28 28 0 0 1 12 306 V40 A28 28 0 0 1 40 12 z"
        fill="#ccc"
        stroke="#FF4444"
        stroke-dasharray="5,2"
        stroke-width="1"
      />
      <text class="circle-text">
        <textPath xlink:href="#text-path1" class="text-content" textLength="280" startOffset="0">
          svg文字路径动画111111111111111111
          <animate attributeName="startOffset" from="0" to="1020" begin="0s" dur="8s" repeatCount="indefinite" />
        </textPath>
        <textPath xlink:href="#text-path1" class="text-content" textLength="280" startOffset="520">
          svg文字路径动画222222222222222222
          <animate attributeName="startOffset" from="520" to="1540" begin="0s" dur="8s" repeatCount="indefinite" />
        </textPath>
      </text>
    </svg>

找到代码后，就需要看一下属性都是什么意思了，介绍一下这里涉及到的属性

1. 先看一下svg标签

• width：顾名思义就是svg的宽度
• viewBox："x, y, width, height"，是svg容器的设置
  x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

2. path标签也就是用来定义svg路径的标签

• d：是文字转动的路径，想让文字沿着圆转动，沿着长方形、菱形、平行四边形或者任何路径转动都可以，我是找了一个文档看了一下这个路径的书写规则，贴个链接，里面还可以在线测试，在线调整路径，我觉得还是挺好用的https://www.nhooo.com/svg/svg-path-element.html
• fill：可以填充当前形状的颜色，gif中第一个文字路径1和文字路径2，灰色区域，设置填充颜色#ccc
• stroke：描边颜色，gif中都是用的#FF4444
• stroke-dasharray：虚线描边，可选值为none,inherit
  • none 肯定是表示不用虚线描边
  • inherit 这是一个逗号或者空格分隔的数值列表，第一个值表示线段的长度，第二个值表示线段间空白的长度，gif中stroke-dasharray="5 2"中，第一个数字 5 表示虚线中的线段的长度，而第二个数字 2 表示两个线段间的长度是 2px。所以出来的效果是每段虚线的间隔都是一样的。其实这个dasharray可以不只两个值，可以有很多个，会循环依次用到线段和空白之间。gif中最后一个文字路径9设置的stroke-dasharray="(20,5)",是不是能明显感受到差别
• stroke-width：描边宽度，gif中最后一个文字路径9为3，其他的都是1，类似border-width

3. textPath标签也就是直接关系到文字的标签了，定义文字按照什么路径排列的

• xlink:href ： 这里是指这个文字用用哪条路径，注意我们在 path 那设置的 id 属性。
• textLength ： 表示文字的长度，可以根据想要的文字间距离来设置文字长度，文字长度越长，字与字之间距离越大，这里的280是我觉得文字距离比较适中。
• startOffset ： 表示文字开始的偏移量，也就是文字开始点在路径中的位置。

4. animate标签就是动画了

• attributeName：在动画中，父元素的需要被改变的属性名，类似我们的例子中使用了startOffset 作为attributeName，通过改变文字的偏移量让文字动起来。
• from：动画初始值
• to：动画最终值
• begin：动画开始的延时
• dur：整个动画的时间
• repeatCount：动画重复次数，indefinite是无限次，就是一直循环，如果是1的话，那么意思是动画只执行一次

gif中每个例子中的长度其实都是我一点点调的，到现在我也不太清楚这个计算方式应该是怎么算。
我们看一下gif中，前面两组看不出任何破绽，都是无限重复循环的，但是这个路径长度如果计算不好会怎么样呢，看一下最右边那组文字路径8，很明显在走完一遍后文字消失在了最右边，这就是长度写的太长了，导致文字已经到达文字边缘了，但是还有一截长度没走完，页面上看起来就消失了，但是上面路径6和路径7长度写的就会短一些，所以到最后还灭消失的时候又返回到了起点。

建议如果也不知道咋写的可以慢慢调试，但是作为程序员，写数据类的东西还是要精确一点。所以我又去找了各大文档文章等，然后看到了snap.svg.js的库，然后有个方法是可以计算出路径长度的Snap.path.getTotalLength(path)

let path = "M40 12 H200 A28 28 0 0 1 226 40  V305 A28 28 0 0 1 200 332 H40 A28 28 0 0 1 12 306 V40 A28 28 0 0 1 40 12 H200 A28 28 0 0 1 226 40 V305 A28 28 0 0 1 200 332 H40 A28 28 0 0 1 12 306 V40 A28 28 0 0 1 40 12 z"
let pathLength = Snap.path.getTotalLength(path)
console.log(pathLength)

由于我项目里面那个文字动画已经搞定了，所以就没有继续引这个库去尝试，大家可以参考一下，如果项目允许的话可以尝试一下～

//文字路径5 圆形
d="M 200 200 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0 M 200 200 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0"
//最后一组 路径都一样，只是属性不一样
d="M10,180 q100,120 120,20 q140,-50 160,0 q100,120 120,20 q140,-50 160,0"

文字动画最重要的是路径，要文字沿着怎样的路径去运动，先确定路径之后再去看路径长度，路径长度比较笨的办法是自己一点点调，当然项目允许的话肯定还是要引库进去，能更精确一些。