svg的标签是原生声明式动画方案，无需javascript，通过attributename、from/to/values、dur等属性控制svg元素属性随时间变化，支持自动播放与click等事件触发，适用于简单交互动画。

SVG 的 <animate></animate> 标签是原生、声明式的动画方案，无需 JavaScript，直接在 SVG 内部控制属性随时间变化，适合简单交互动画或轻量级视觉反馈。

核心用法：绑定目标属性并定义变化过程

<animate></animate> 必须嵌套在要动画的 SVG 元素（如 <circle></circle>、<rect></rect>）内部，通过以下关键属性控制行为：

• attributeName：指定要动画的属性名，例如 "cx"、"fill"、"opacity"（注意大小写敏感，且必须是目标元素支持的可动画属性）
• from / to / values：定义起始值、结束值或关键帧序列。三者可组合使用：from="10" to="200" 实现线性过渡；values="red;blue;green" 实现多阶颜色切换
• dur：动画持续时间，单位为秒（如 "2s"）或毫秒（如 "1500ms"）
• repeatCount：重复次数，可设为数字（如 "3"）或 "indefinite" 实现无限循环

触发方式：自动播放与交互控制

默认情况下，<animate></animate> 在 SVG 加载完成即开始播放。也可通过事件手动触发：

• 添加 begin 属性，如 begin="click"，点击元素时启动动画
• 配合 end 或 restart 属性实现暂停/重播，例如 begin="button.click" 可绑定外部按钮（需该按钮有 id 且 SVG 支持跨元素事件引用）
• 使用 begin="indefinite" 可暂停初始状态，再通过 JS 调用 element.beginElement() 启动（适用于需要精确控制的场景）

常见可动画属性与注意事项

不是所有 SVG 属性都支持 <animate></animate>。常用可动画属性包括：

• 几何类："cx"、"cy"、"r"、"x"、"y"、"width"、"height"
• 样式类："fill"、"stroke"、"opacity"、"stroke-width"
• 变换类："transform"（需配合 type="translate" 或 type="scale" 等，并用 values 指定变换矩阵或字符串）

注意："class"、"id"、"style"（整体）等不可直接动画；CSS 类切换需用 CSS 动画替代。

一个完整示例：点击变色并移动的圆

  
    
    
  

点击后，圆从左向右平滑移动，同时颜色按顺序切换一次。其中 fill="freeze" 表示动画结束后保持最终状态（否则会回退到初始值）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！