SVG 片段标识符（#icon1）配合 CSS 动画在现代浏览器中基本可用，但受 SVG 处理模式限制：HTML 引用的 SVG 片段默认处于「安全静态模式」，动画可能被禁用；仅当浏览器明确支持并启用「安全动画模式」时，CSS 动画才生效。
svg 片段标识符（`#icon1`）配合 css 动画在现代浏览器中基本可用，但受 svg 处理模式限制：html `` 引用的 svg 片段默认处于「安全静态模式」，动画可能被禁用；仅当浏览器明确支持并启用「安全动画模式」时，css 动画才生效。
在现代 Web 开发中，将 SVG 图标集中存于单个 .svg 文件并通过 #id 引用（即 SVG Fragment Identifier）是一种广受推崇的性能优化实践——它减少 HTTP 请求、支持缓存复用，并便于统一维护样式。然而，当图标需具备旋转、缩放等动态效果时，开发者常会自然地为
答案是：技术上可行，但规范保障有限，实际行为高度依赖浏览器实现与处理模式。
? 规范依据：SVG2 中的“处理模式”（Processing Modes）
SVG 2 规范定义了两种关键处理模式：
- Secure Static Mode（安全静态模式）：禁止执行脚本、禁止加载外部资源、禁止播放动画（包括 CSS 动画与 SMIL），DOM 为只读。
- Secure Animated Mode（安全动画模式）：允许 CSS 动画和 SMIL 动画，但仍禁止脚本与外部资源加载。
根据 SVG2 Conformance § Referencing Modes，当 SVG 被嵌入 元素时：
立即学习“前端免费学习笔记（深入）”；
“An SVG embedded within an ‘image’ element must be processed in secure animated mode if the embedding document supports declarative animation, or in secure static mode otherwise.”
⚠️ 关键矛盾点在于：该条款看似赋予浏览器“支持动画即启用动画模式”的自由裁量权，但同规范的 Linking § Processing URL References 却指出：
“Otherwise, the subresource must be parsed to identify the target element. [...] it must process it in secure static mode (meaning, do not fetch any additional external resources and do not run scripts or play animations or video).”
这意味着：W3C 规范本身存在表述张力——前者暗示动画可选启用，后者则对片段引用（subresource reference）强制要求静态模式。目前主流浏览器（Chrome、Firefox、Safari）在 
场景下普遍采用 secure static mode，因此你观察到的“Android 9 内置浏览器不执行 CSS 动画”并非 Bug，而是合规行为。
✅ 实测兼容性结论（截至 2024）
| 浏览器 / 环境 |
 中 CSS 动画 |
SMIL 动画 | 备注 |
|---|---|---|---|
| Chrome 115+（桌面/Android） | ❌ 大部分禁用（偶有版本启用，不稳定） | ✅ 支持 | 受策略变动影响大，不可依赖 |
| Firefox 120+ | ❌ 默认禁用 | ✅ 支持 | svg.animation.enabled 隐藏开关已废弃 |
| Safari 17+（iOS/macOS） | ❌ 禁用 | ⚠️ 有限支持（仅部分属性） | 严格遵循静态模式 |
| Android 9 内置浏览器 | ❌ 禁用 | ✅ 支持 | 验证了规范差异的实际影响 |
? 在 caniuse.com 上无法直接查到“SVG fragment + CSS animation”的兼容性，因其未作为独立特性收录。你需要组合查询：
- SVG Fragment Identifiers → 确认基础支持（✅ 广泛支持）
- CSS Animations → 确认 CSS 动画能力（✅ 广泛支持）
- 但二者叠加的交集行为无独立数据——这正反映出该场景处于规范灰色地带。
? 可靠替代方案（推荐生产使用）
为确保动画图标在所有环境下一致生效，请避免依赖 + SVG Fragment 的 CSS 动画。推荐以下经过验证的方案：
✅ 方案 1：内联 SVG（Inline SVG）
直接将 SVG 代码嵌入 HTML，完全脱离 容器限制：
<!-- 动画完全可控，支持 :target、CSS、JS -->
<svg viewBox="0 0 160 160" class="icon rotate">
<g id="icon1">
<rect x="30" y="30" width="100" height="100"/>
</g>
</svg>✅ 方案 2：
<object type="image/svg+xml" data="icons.svg#icon1" class="icon"></object>
✅
✅ 方案 3：SMIL（向后兼容首选）
如你的测试所示，Android 9 浏览器支持 SMIL。虽已逐步被弃用，但在图标动画场景仍具强兼容性：
<g id="icon1">
<rect x="30" y="30" width="100" height="100"/>
<animateTransform
attributeName="transform"
type="rotate"
from="0 80 80"
to="360 80 80"
dur="2s"
repeatCount="indefinite" />
</g>? 总结与建议
-
不要假设
中的 CSS 动画会被执行——这是规范未保证、浏览器未承诺的行为； - 优先选择内联 SVG：语义清晰、样式完全可控、动画 100% 可靠，且现代构建工具（如 Webpack 的 svg-inline-loader、Vite 的 vite-plugin-svg-icons）已极大简化其集成；
- 若必须外链 SVG，用
- SMIL 是兼容性兜底方案，尤其针对老旧 Android WebView，但需注意其在 Safari 中的部分限制；
- 最终决策应基于真实设备测试（特别是目标用户群的主流机型），而非仅依赖 caniuse 数据。
规范演进需要社区反馈。如果你遇到明确的互操作性问题，可向 W3C SVG Working Group 提交 issue，推动“fragment + animation”行为的明确化与标准化。
