SVG动画用SMIL通过等4个核心标签实现，无需JS或CSS；支持现代浏览器，IE已淘汰；关键属性包括attributeName、from/to、dur、repeatCount、fill和begin。

SVG动画用SMIL做，核心就是往SVG元素里加<animate></animate>这类标签，不写JavaScript、不依赖CSS也能动起来。现代浏览器（Chrome/Firefox/Safari）都支持，IE已淘汰，不用顾虑兼容性问题。

SMIL动画的4个基础标签

所有SMIL动画都靠这四个自闭合标签实现，直接嵌在目标SVG元素内部或作为子元素使用：

• ：延迟修改单个属性值，无过渡效果。比如2秒后把圆的cy从92.8变成105.7；
• ：最常用，对一个数值型属性做平滑过渡（如x、fill、opacity）；
• ：专用于transform类动画，比如旋转rotate、缩放scale、平移translate；
• ：让元素沿路径移动，这是CSS目前难以替代的能力。

关键属性怎么填

以<animate></animate>为例，这几个属性必须配齐才有效：

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

• attributeName：要动的属性名，如"cx"、"fill"、"r"；
• from 和 to：起始值和结束值，比如from="0" to="100"；
• dur：持续时间，单位是s或ms，如"1.5s"；
• repeatCount：重复次数，"indefinite"表示无限循环；
• fill：动画结束后是否保持最终状态，常用"freeze"；
• begin：可选，指定延迟启动，如"0.5s"或"click"触发。

动手写一个旋转方块

下面这段代码能让一个橙色方块绕中心匀速旋转360°，循环不停：

  
    
                                 type="rotate"
                          from="0"
                          to="360"
                          dur="2s"
                          repeatCount="indefinite"
                          fill="freeze"/>
    
  

小技巧与避坑提醒

• 动画目标必须是SVG原生属性（如cx、stroke-width），不能直接动CSS类名；
• attributeType已废弃，不用写，浏览器默认按XML处理；
• 多个<animate></animate>可共存于同一元素，互不干扰；
• 想让动画更顺滑，优先用linear缓动，避免ease带来的额外计算；
• 复杂路径动画建议先用<path></path>定义好路线，再用<animatemotion></animatemotion>绑定。

基本上就这些。写熟了几个标签和属性，SVG自己就能跑起来，轻量又可靠。