SVG动画用标签基于SMIL实现，轻量原生、无需JS；推荐嵌套在目标元素内，关键属性包括attributeName、from/to/values、dur、repeatCount、begin；复杂变换应使用；支持事件触发与JS控制；现代浏览器兼容良好，IE全系不支持。
SVG动画用
标签实现，核心是通过 SMIL（Synchronized Multimedia Integration Language）在 SVG 元素内部定义属性随时间变化的行为。它轻量、原生支持、无需 JS 就能驱动动画，适合图标动效、
数据可视化
过渡等场景。
animate 标签必须写在目标元素内部或同级
不能单独存在，必须作为 SVG 元素的子元素（推荐），或与目标元素同级并用
指向它（需注意
浏览器
兼容性）。最稳妥写法是直接嵌套：
上面例子让圆的半径从 20 动画到 40，循环播放。关键属性说明：
attributeName
：指定要动画的 SVG 属性名，如
、
、
、
（注意：
需配合
或改用
）
from / to / values
：定义起始值、结束值或关键帧序列（
）
dur
：动画持续时间，单位可为
或
repeatCount
：重复次数，
表示无限循环
begin
：动画开始时机，支持
、
、
、
（依赖其他动画）等
位移、旋转、缩放建议用 animateTransform
直接对
属性做
容易出错（尤其多变换叠加时）。推荐使用专用标签
：
type
可选
、
、
、
/
；
和
格式按 type 变化，例如
是
，
是
。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
支持事件触发和暂停/恢复控制
动画可响应用户交互，比如点击开始、悬停暂停：
加
实现点击触发动画
用
配合事件修改静态属性（如改变 fill 后再启动动画）
通过 JS 调用 SVG 元素的
、
、
、
控制播放状态
例如：
可手动启动一次动画。
兼容性注意：现代浏览器支持良好，但 IE 全系不支持
Chrome、Firefox、Safari（含 iOS）、Edge（Chromium 版）均支持 SMIL。IE 所有版本不支持，若需兼容 IE，应降级为 CSS 动画（
）或 JS 方案（如 GSAP、Snap.
svg
）。不过目前绝大多数项目已可忽略 IE。
href
cxfillopacitytransformtransformattributeType="XML"values="20;30;40;30;20"smsindefinite0sclickbutton1.clickan1.endtransform
translatescalerotateskewXskewYfromtorotate角度 cx cytranslatex ybegin="click"beginElement()endElement()pauseAnimations()unpauseAnimations()document.querySelector('circle').beginElement();@keyframes + transform