SVG动画

基础属性

width                 指定SVG图像的宽度。
height                指定SVG图像的高度。
viewBox               定义SVG图像的可见区域，它是一个矩形框，由四个数值组成，分别表示x轴和y轴的起始位置，以及宽度和高度。
preserveAspectRatio   指定如何适应SVG图像的viewBox到实际的宽高比例变化，它可以设置为 none（不保持比例），xMinYMin（保持比例并按照最小位置对齐），xMidYMid（保持比例并居中对齐）等等。
xmlns                 定义SVG文档的XML命名空间。
version               指定SVG文档的版本。
id                    为SVG元素指定一个唯一的标识符。
class                 为SVG元素指定一个或多个类名，以便在CSS样式表中进行样式定义和选择。
style                 定义SVG元素的内联样式。
transform             用于指定变换矩阵以实现平移、缩放、旋转等图形变换操作。
opacity               设置SVG元素的不透明度。
fill                  设置元素的填充颜色。
stroke                设置元素的描边颜色。
stroke-width          设置元素的描边宽度。
stroke-linecap        设置描边的线帽样式，包括 butt（平直边缘）、round（圆形边缘）和 square（方形边缘）。
stroke-linejoin       设置描边的线段连接样式，包括 miter（尖角连接）、round（圆角连接）和 bevel（斜角连接）。

标签说明

<svg>             定义SVG文档的根元素。
<g>               用于将多个图形元素组合到单个分组中，以便一起进行变换、样式设置等操作。
<circle>          用于创建圆形。
<rect>            用于创建矩形。
<line>            用于创建直线。
<polyline>        用于创建折线或多边形。
<polygon>         用于创建闭合的多边形。
<path>            用于创建自定义路径，可以绘制出各种复杂形状。
<text>            用于添加文本内容。
<image>           用于插入图像。
<use>             用于引用和复用已定义的图形元素。
<defs>            用于定义可重用的元素或属性。
<linearGradient>  用于创建线性渐变。
<radialGradient>  用于创建径向渐变。
<pattern>         用于创建图案填充。
<mask>            用于创建遮罩效果。
<filter>          用于创建图形效果，如模糊、阴影等。
<clipPath>        用于创建裁剪路径。
<animate>         用于为元素添加基本的动画效果。
<script>          用于嵌入SVG中的脚本代码。

基本动画操作

stroke-dasharray属性接受一个由数字（表示线段的长度）和空格（表示间隔的长度）组成的数组。设置数组中的值可以实现不同的虚线样式。以下是一些常见的设置方法

stroke-dasharray="5"：表示连续线段长度为5个单位，间隔长度为默认值。常用于设置等间隔的点线。
stroke-dasharray="10 5"：表示连续线段长度为10个单位，间隔长度为5个单位。常用于设置等长度的短划线。
stroke-dasharray="10 5 2"：表示连续线段长度为10个单位，间隔长度为5个单位，再加上一个长度为2的间隔。可以实现更复杂的虚线样式。

stroke-dashoffset属性的取值可以是一个具体的长度值，也可以是一个百分比值。具体的长度值表示从路径的起始点开始的偏移量，而百分比值是相对于路径长度的偏移量。

可设置为负数
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 630;
  }