SVG动画实现技巧

loading.io 网站展示了大量视觉效果出色的加载动画图标，全部采用 SVG 编写。仅需简短代码，便能实现比图片更清晰、体积更小的效果，相比纯 DOM 方案也更加灵活高效，同时支持为图标添加点击交互响应功能。

1、 基础图形组件

2、 SVG 提供了多种内置的图形元素，包括矩形、圆形、椭圆、直线、折线、多边形、路径以及文本。这些基本形状可通过对应标签直接调用，便于构建丰富的矢量图形内容，适用于网页设计与可视化展示，具有良好的可扩展性与清晰度表现。

3、 视觉呈现与感受

4、 SVG元素的样式既可作为标签属性设置，也可置于style中，主要包括填充、描边、透明度等常用属性。

5、 笔触颜色：stroke

6、 笔触的粗细程度，用于定义线条宽度。

7、 笔触透明度，控制描边的不透明程度。

8、 填充色指的是背景颜色，用于设定元素的背景。

9、 填充颜色的不透明程度，数值越小越透明

10、 图形变换功能，类似于CSS3中的transform属性，可实现元素的旋转、缩放、移动等效果。

11、 SVG 提供多种滤镜功能，如渐变、阴影、模糊和图像融合等。实际使用时无需掌握全部，比如绘制彩色圆圈，只需结合 circle 标签与 fill 属性即可轻松实现。

12、 辅助元素

13、 SVG 提供了多个辅助元素，如 ``、``、`` 和 ``，它们不直接绘制图形，而是用于对图形元素进行分组、定义可复用内容以及实现重复引用，提升结构清晰度与代码复用性。详细说明可参见相关文档。

14、 元素用于将相关的图形元素组合在一起，便于统一进行旋转、缩放或应用样式等操作。

15、 通过可重复利用已有的SVG图形，既支持单个元素的复用，也支持由定义的组合元素调用。

16、 在中定义的元素不会直接呈现，其样式可留待使用引用时再具体设定。

17、 该符号可独立创建窗口，既具备分组功能，又拥有默认不可见的特性，融合了分组与隐藏的优势。

18、 针对SVG中transform变换基点的问题，可采用嵌套标签的方式，通过调整的位置来重新设定基点。例如绘制多个水平排列的圆形，并设置不同缩放比例，即可实现预期效果。

19、 四、动画制作方法

20、 SVG动画通过内置的动画标签元素来实现效果。

21、 通过animate实现单一属性的平滑过渡效果。

22、 通过可实现元素的平移、旋转、缩放等变换动画效果。

23、 通过animateMotion可实现沿路径的动画效果。

24、 SVG语法具有较高灵活性，样式既可通过标签属性设置，也可置于style中定义；动画元素可使用xlink指向目标对象，亦可直接嵌套于元素内部。以下示例展示animateTransform通过xlink引用目标元素的用法。

25、 上述动画为从A到B的过渡，若需实现平滑循环，至少需设定三个关键帧。animateTransform 提供更丰富且灵活的属性配置选项，满足复杂动画需求。

26、 多个关键点的数值，用于替代起始与结束值，如设定为0;1;0表示依次经过的数值变化。

27、 keyTimes：与values相对应，表示各关键点的时间位置。

28、 动画速度模式，可选值包括离散、线性、匀速及样条曲线方式，用于控制动画变化的快慢节奏。

29、 当动画模式为样条曲线时，通过贝塞尔控制点调节运动轨迹的平滑程度。

30、 深入解析SVG动画技术与应用