代码片段

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

(gif中第一个文字路径1)

<svgid="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"><pathid="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>

属性介绍

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

先看一下svg标签

width：顾名思义就是svg的宽度
viewBox：“x, y, width, height”，是svg容器的设置

x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

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

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

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

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"