为什么 Firefox 会截断嵌入的 SVG？
将这段 SVG 片段直接嵌入到使用 DTD XHTML 1.0 Strict 提供的 XHTML 正文
<svg>
<circle cx="150" cy="150" r="150"/>
</svg>
中 查看此示例：http://jsfiddle.net/3NXbL 使用 Chrome（我使用的是 11.0.696.57）可以看到整个圆圈。
使用 Firefox 查看相同的 jsfiddle（我使用的是 4.0.1）。可以看到相同的圆圈，但在垂直方向上切成两半。
（注意，我在其他版本的 Firefox 上看到了完全相同的行为，不同的文档类型和包含 SVG 内容的不同方法，但这被简化为 jsfiddle 的一个非常简单的示例）
Firefox 中为 SVG 内容分配尺寸的规则是什么网页？有没有什么简单的方法可以使它们与其他浏览器保持一致？您将如何修改我的 jsfiddle 示例以查看整个圆圈？
Take this snippet of SVG embedded directly into the body of an XHTML served with DTD XHTML 1.0 Strict
<svg>
<circle cx="150" cy="150" r="150"/>
</svg>
View this example at http://jsfiddle.net/3NXbL using Chrome (I'm using 11.0.696.57) A whole circle is seen.
View the same jsfiddle using Firefox (I'm using 4.0.1). The same circle is seen, but cut in half on the vertical.
(Note I have seen the exact same behavior on other versions of Firefox, different doc types and different methods of including SVG content, but this is cut down to a very simple example for jsfiddle)
What are Firefox's rules for allocating dimensions to SVG content in web pages? Are there any easy ways to bring them into line with other browsers? How would you modify my jsfiddle example to see the whole circle?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
1) 根据 SVG 规范，最外层
默认为overflow:hidden。2) 最外面的
的大小与 http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width 和 http://www.w3.org/TR/CSS21/visudet.html#inline-replaced- height ，对于您的情况（没有指定为 100% 的固有高度、宽度和高度，但包含块可能具有自动高度），给出的高度为 150px。Chrone 似乎只是有问题：它使用视口而不是实际的包含块作为
高度的百分比基数。1) Outermost
<svg>defaults tooverflow:hiddenper SVG spec.2) The size of the outermost
<svg>is determined like that of any other CSS replaced element per http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width and http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height and for your case (no intrinsic height, width and height specified as 100% but containing block presumably has auto height) that gives a height of 150px.Chrone seems to just be buggy here: it's using the viewport instead of the actual containing block as the percentage base for the
<svg>height.您应该在
元素上指定宽度和高度。当省略此值时，Firefox 默认为任意高度，这会导致视口被剪切。You should specify a
widthandheighton the<svg>element. Firefox defaults to an arbitrary height when this is omitted, which causes the clipped viewport.