默认情况下，SVG 内容是否应该在嵌入的 <svg> 之外可见？ [关闭]

Question

过去，我回答了一个关于 SVG 图像在 IE9 中没有被“裁剪”(overflow: hidden) 的问题，而所有其他支持的浏览器都这样做了。答案是here。

今天，在再次查看 HTML5 Boilerplate 时，我注意到他们声称他们 "[correct] overflow not being hidden in IE9" 使用以下代码：

svg:not(:root) { overflow: hidden; }

我正在寻找某人通过指出 HTML5 或 SVG 规范中的其他注释来确认或否认我的原始研究。我找不到任何东西，但我想确定我没有遗漏任何东西。

我能找到的最好的是他们正在尝试应用规则 7 here，但这应该只适用于 SVG 文档，例如通过 img 标记或直接加载时。

Answer 1

SVG 规范有这样的说法：http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

似乎类似于 Firefox 和 Chrome 不做的事情？

Answer 2

使用您指定的理由（特别是the spec 的第五和第七个要点），您的原始答案对我来说似乎是正确的。

IE 是正确的而 Webkit 和 Firefox 不是正确的似乎极不可能。但是，您怀疑第七个要点是区别因素。

如果您在 Chrome 中加载 this test case 并使用开发者工具检查 SVG，您将看到：

(user agent stylesheet)

svg:not(:root), symbol, image, marker, pattern, foreignObject {
  overflow: hidden;
}

如果您在 Firebug 中启用“显示用户代理 CSS”，您会在 Firefox 中看到此规则：

svg.css (line 49) <System>

svg:not(:root), symbol, image, marker, pattern, foreignObject {
  overflow: hidden;
} 

最后，如果您编辑测试用例以添加svg { overflow:hidden }，那么 IE 在视觉上与其他浏览器匹配。

因此，在我看来，所有三种浏览器的行为都符合规范，但 Chrome/Safari/FF 都有更符合大多数用户期望的 UA 规则。

如果我可以不理会，这就是我要停止回答的地方。

但是，如果您edit the test case to add svg { overflow:visible }，Chrome 和 Firefox 都不会“正确”显示溢出的内容。我不确定如何用这个答案的其余部分来解决这个数据点。 ：/