SVG animation animateMotion动画补充

正常我们的路径动画：

源码：

HTML
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">joubn
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 200,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

反向我们的路径动画：

源码：

HTML
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">joubn
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 200,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

如果说设计小MM给的不是path而是polygon元素呢

我们可以用SVG转换工具把任何元素转换成path

其它动画知识点看SVG SMIL animation动画详解这里

补充流光效果：