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的颜色去掉，就会更加的玄幻一些 下面是我的思考过程。

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

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

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

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

4. 让文字在路径上运动起来 使用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也是一个好地方 codepen.io/tw93/pen/oB…

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

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

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

svg画曲线

常用path

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

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