使用path和animateMotion构建有趣的SVG动画

SVG 基本形状

SVG 提供了一些基本的图形供用户选择:

• 矩形rect
• 圆形circle
• 椭圆ellipse
• 直线line
• 折线polyline
• 多边形polygon
• 路径path

对于规则图形，基础的形状已足够使用，对于不规则的图形，path就派上了大用处。

Path

path 元素通过d属性定义图形的形状，以下是一个示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50.1 -16.9722 75.2 25.07">
	<path d="M -50 8
                 L -25 8 
                 L -25 -1 
                 L 0 -1 
                 M 0 -1 
                 L 0 -8 
                 L 25 -8 
                 L 25 -15 
                 M -47 5 
                 C -39 -8 -22 -7 -15 -5 
                 C -8 -17 6 -19 15 -15" 
              stroke="#FF0000" stroke-width="0.1" fill="none"/>
</svg>

• M L之类的字母定义链接
• 在线编辑链接

效果图如下：

动画animateMotion

如何使用SVG的标签完成动画效果呢？

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

在animateMotion元素将path的值设置的与路径的d值一样，那么这个circle元素就按照定义的轨迹运动。

基于此，我们可以构建复杂的运动轨迹来完成一些有趣的动画！

示例一：

示例二：