SVG的<animate>标签是原生声明式动画方案，无需JavaScript，通过attributeName、from/to/values、dur等属性控制SVG元素属性随时间变化，支持自动播放与click等事件触发，适用于简单交互动画。
SVG 的 <animate> 标签是原生、声明式的动画方案，无需 JavaScript，直接在 SVG 内部控制属性随时间变化，适合简单交互动画或轻量级视觉反馈。
核心用法：绑定目标属性并定义变化过程
<animate> 必须嵌套在要动画的 SVG 元素（如 <circle>、<rect>）内部，通过以下关键属性控制行为：
-
attributeName：指定要动画的属性名，例如
"cx"、"fill"、"opacity"（注意大小写敏感，且必须是目标元素支持的可动画属性） -
from / to / values：定义起始值、结束值或关键帧序列。三者可组合使用：
from="10" to="200"实现线性过渡；values="red;blue;green"实现多阶颜色切换 -
dur：动画持续时间，单位为秒（如
"2s"）或毫秒（如"1500ms"） -
repeatCount：重复次数，可设为数字（如
"3"）或"indefinite"实现无限循环
触发方式：自动播放与交互控制
默认情况下，<animate> 在 SVG 加载完成即开始播放。也可通过事件手动触发：
- 添加 begin 属性，如
begin="click"，点击元素时启动动画 - 配合 end 或 restart 属性实现暂停/重播，例如
begin="button.click"可绑定外部按钮（需该按钮有 id 且 SVG 支持跨元素事件引用） - 使用
begin="indefinite"可暂停初始状态，再通过 JS 调用element.beginElement()启动（适用于需要精确控制的场景）
常见可动画属性与注意事项
不是所有 SVG 属性都支持 <animate>。常用可动画属性包括：
立即学习“前端免费学习笔记（深入）”；
- 几何类：
"cx"、"cy"、"r"、"x"、"y"、"width"、"height" - 样式类：
"fill"、"stroke"、"opacity"、"stroke-width" - 变换类：
"transform"（需配合type="translate"或type="scale"等，并用values指定变换矩阵或字符串）
注意："class"、"id"、"style"（整体）等不可直接动画；CSS 类切换需用 CSS 动画替代。
一个完整示例：点击变色并移动的圆
<svg width="200" height="200">
<circle cx="50" cy="50" r="20" fill="orange">
<animate attributeName="cx" from="50" to="150" dur="1.5s" begin="click" fill="freeze"/>
<animate attributeName="fill" values="orange;purple;orange" dur="1.5s" begin="click" repeatCount="1"/>
</circle>
</svg>
点击后，圆从左向右平滑移动，同时颜色按顺序切换一次。其中 fill="freeze" 表示动画结束后保持最终状态（否则会回退到初始值）。
