SVG内容默认情况下应在嵌入的<svg>之外可见吗？

Question

过去，我回答了一个关于在IE9中SVG图像无法“裁剪”（overflow: hidden），而其他支持的浏览器都可以的问题。答案在这里。

今天，当我再次审查HTML5 Boilerplate时，我注意到他们声称使用以下代码{{link2：“[correct] overflow not being hidden in IE9”}}来解决此问题：

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

我正在寻找有关HTML5或SVG规范中的其他注释来确认或否认我的原始研究。我找不到任何东西，但我想确保我没有错过什么。

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

- Kevin Peno

---

感谢@Phrogz修改标题。我在如何准确概括问题方面遇到了一些困难。 - Kevin Peno

@casperOne 询问规范的澄清不是一个真正的问题吗？我可以看到措辞可能不太好，但我不明白为什么它符合您标记的类别。 它是否过于局限？ - Kevin Peno

你想要有人澄清某人是对还是错。我可以重新打开它，但然后我会再次将其关闭为“不具建设性”。 - casperOne

@casperOne 我理解你的观点，但实际上我正在寻求帮助理解他们（大多数浏览器和样板文件）与我的解释。具体来说，我在研究中哪里出了问题。关于“谁是对的”的唯一参考是我自己（不好地）引用了以前的答案，为什么我首先提出这个问题的背景。感谢您的信息，我将记住它以备将来之需。 - Kevin Peno

问题既有效又建设性。他正在询问有关规范的澄清问题，这个规范在不同的浏览器中实现方式不同，这对于浏览器开发来说至关重要。 - Yarin

Answer 1

根据您指定的理由（特别是规范的第五和第七个要点），我认为您的原始答案听起来不错。

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

如果您在Chrome中加载此测试用例并使用开发人员工具检查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规则更符合大多数用户的期望。

如果我能满足要求，这就是我回答的地方。

然而，如果您编辑测试用例以添加svg { overflow:visible }, 那么Chrome和Firefox不会“正确”显示溢出的内容。我不确定如何将此数据点与其余部分解决。 :/

- Phrogz

---

观点（非答案）：如果没有Chrome和Firefox的行为，那么<svg width="4" height="4" viewBox="0 0 1 1" style="overflow:visible">就需要找到整个内容的边界框，并以每个世界单位4像素呈现SVG的全部内容。这与我对SVG的期望完全相反，我认为必须有一个规范来定义要呈现的SVG内容的范围。我怀疑IE9已经错过或错误解释了这个规范（我找不到）。 - Phrogz

感谢您提供详细的答案。(同时也表达个人观点) 我同意大多数人，特别是那些更熟悉二进制图像和图像标签的人，不会预期SVG图像默认情况下会溢出。@Robert上面的链接揭示了一个有趣的冲突，当比较必须实现的默认UA与规则7（关键字SVG文档）+http://www.w3.org/TR/SVG/styling.html#Scope时。 - Kevin Peno

将您的讨论链接和上面的UA样式表链接组合在一起后，我看到了IE9出现错误的地方。规则7确实适用，但不是作为单独的规则，而是与overflow中的所有规则结合在一起，作为对UAs的警告，指出视口的默认样式是overflow: hidden。 - Kevin Peno

Answer 2

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

看起来与Firefox和Chrome的做法相似，不是吗？

- Robert Longson

---

虽然（根据我的回答）Chrome和FF使用了略微修改过的相同版本，但还是很好。 （也许在这方面有勘误？）这意味着IE错了，没有使用这个UA表。然而，对我来说，它并没有完全澄清为什么overflow:visible不会导致在Chrome / FF中出现溢出路径。这可能是一个单独的问题，但是SVG要呈现的“边界”应该满足哪些期望？什么情况下边界会超过明确的“高度”和“宽度”？ - Phrogz

这个讨论很相关。 - Phrogz

谢谢您指出这一点。看起来SVG命名空间元素所需的默认样式表与上面第7条规则和http://www.w3.org/TR/SVG/styling.html#Scope存在冲突。 - Kevin Peno

阅读了上面的讨论链接、您回答中的链接以及重新阅读了规范，现在明白了规范所需的UA样式表使得IE9无效。感谢您的帮助！ - Kevin Peno