SMIL 动画

SMIL 动画指在 SVG 集成了 Synchronized Multimedia Integration Language (SMIL) 这种动画标准，该语言被 SVG 原生支持，主要是使用标签来描述动画。SMIL 允许你：

• 变动一个元素的数字属性（x、y……）
• 变动元素的变形属性（ translation 或 rotation ）
• 变动元素的颜色属性
• 物件方向与运动路径方向同步

<animate> 元素

SVG 动画

描边动画

描边动画原理

SVG 描边动画主要与以下 3 个属性相关。

• stroke="<paint>" : 定义图形元素的外轮廓的颜色。它的默认值是 none 。
• stroke-dasharray="<dasharray>" : 控制用来描边的点划线的图案范式。
  • <dasharray> : 它是一个 <length> 和 <percentage> 数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2 等同于 5,3,2,5,3,2 。
• stroke-dashoffset="<percentage> | <length> | inherit" : 指定了 dash 模式到路径开始的距离。如果使用了一个百分比值，那么这个值就代表了当前 viewport(视口) 的一个百分比。

SVG 基础

可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和 CSS，DOM，JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

容器

<svg> 元素

svg 元素可以用于在当前文档（比如说，一个 HTML 文档）内嵌套一个独立的 svg 片段。 这个独立片段拥有独立的视口和坐标系统。

基于 Anime.js 的 SVG 动画

动画库: animejs

描边动画

路径动画

<div id="motionPath">
  <div class="motion-path-wrapper">
    <div class="motion-path-square"></div>
    <svg width="500" height="300" viewBox="0 0 500 300">
      <path
        id="curpath"
        fill="none"
        stroke="currentColor"
        stroke-width="1"
        d="M11.6,246.9c0,0,143.1-274.1,267.8-137.9s124.7,136.2,124.7,136.2L11.6,246.9z"
      />
    </svg>
  </div>
</div>