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 100
C 500 200 600 300 700 200
C 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/
