SVG Fragment Identifier结合CSS动画的标准支持及兼容性查询

1. WEB标准是否明确保证使用SVG Fragment Identifier时CSS动画的有效性？ #

没有明确的强制保证。

当通过SVG Fragment Identifier引用外部SVG中的部分元素时，外部CSS动画的有效性并未被WEB标准强制要求。这是因为外部引用的SVG（比如通过<img>、<object>标签加载带fragment的SVG文件）属于独立的文档上下文，标准并未规定浏览器必须允许外部CSS穿透到这类独立文档中对内部元素应用动画。只有当SVG内联在HTML文档中时，CSS动画的有效性才是标准明确保障的。

2. 相关标准依据 #

• SVG规范：SVG 2及之前的版本中，关于Fragment Identifier的章节仅定义了如何通过片段标识符定位SVG内的元素，并未提及CSS动画在该场景下的有效性要求。
• CSS Animations规范：规范明确动画作用于当前文档树内的元素，但对于外部引用的SVG资源，其属于独立的文档环境，外部CSS对其内部元素的样式控制（包括动画）并未被强制要求支持，浏览器厂商有一定的实现自由度。

3. 如何在caniuse.com查询该特性的兼容性信息 #

• 拆分核心场景，分别搜索相关关键词：
  • 先搜索「SVG Fragment Identifier」，确认基础的片段引用功能在各浏览器的支持情况。
  • 再搜索「CSS animations on external SVG」，查看外部引用SVG时CSS动画的兼容性。
  • 交叉对比两个查询结果，重点关注Android WebView（对应Android内置浏览器）的版本支持细节，区分内联SVG和外部引用SVG的差异。
• 在搜索结果的详情页中，查看各浏览器版本的支持标记，注意标注的“部分支持”或“不支持”的具体说明，通常会提及外部引用场景下的限制。

内容的提问来源于stack exchange，提问作者PavelDev