svg 让文字沿着指定的曲线运动

本文介绍使用svg，让文字沿着指定的曲线运动。我的弹幕也有解决方案了
如图所示，文字在指定的曲线上运动

<svg width="100%" height="100%" viewBox="0 0 1000 300"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MyPath"d="M 100 200 C 200 100 300   0 400 100C 500 200 600 300 700 200C 800 100 900 100 900 100" /></defs><use xlink:href="#MyPath" fill="none" stroke="red"  /><text font-family="Verdana" font-size="42.5"><textPath xlink:href="#MyPath">CSDN-叶常落<animate attributeName="startOffset" from="0" to ="830" begin="0s" dur="10s" repeatCount="indefinite"/></textPath></text><!-- Show outline of the viewport using 'rect' element --></svg>

如果把path的颜色去掉，就会更加的玄幻一些

下面是我的思考过程。

svg画曲线
path可以画出一条路径,path可以用id作为唯一标示
动画中如何指定元素的运动轨迹

animate 动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。

animateMotion元素导致引用的元素沿着运动路径移动。
animateMotion元素的mpath子元素使animateMotion 元素能够引用一个外部的path元素作为运动路径的定义。

把文字放到指定的路径上
除了笔直地绘制一行文字以外， SVG 也可以根据 path 元素的形状来放置文字。只要在textPath元素内部放置文本，并通过其xlink:href属性值引用path元素，我们就可以让文字块呈现在path元素给定的路径上了。
让文字在路径上运动起来
使用animate让文字动起来

  <text><textPath  xlink:href="#path1" class="text-content"  startOffset="160">热烈欢迎         <animate attributeName="startOffset" from="0" to ="830" begin="0s" dur="10s" repeatCount="indefinite"/></textPath></text><rect  width="10" height="10"><animateMotion dur="6s" repeatCount="indefinite" rotate="auto" ><mpath xlink:href="#path1"/></animateMotion></rect>

codepen也是一个好地方
https://codepen.io/tw93/pen/oBYGrZ

web浏览器真是个有趣的地方

来不及解释了快上车https://zhuanlan.zhihu.com/p/25016633

有趣的灵魂总是让人忍不住去Follow啊。
https://juejin.im/post/585f855961ff4b006ce0f05b
下面的图片的Path不是我的原创，原创在这里。

svg画曲线

常用path

path多数不是手动敲出来的，而是从PS导出的，要知道设计工具是可以导出svg的。
有了path之后，我们再给她添加上动画效果就可以了。

参考文档
【Web动画】SVG 实现复杂线条动画
https://www.cnblogs.com/coco1s/p/6230165.html
三十个大神级别的svg动效
https://www.hongkiat.com/blog/svg-animations/