在Webkit浏览器中错误地计算SVG高度

Question

我有一个特定于Webkit浏览器的问题(Safari和Chrome,在Mac和PC上).

我正在使用Raphael JS渲染SVG数据并使用响应式布局来使用浏览器窗口缩放SVG.使用JQuery将SVG设置为100%宽度/高度.包含元素的宽度设置为百分比,以便在页面调整大小时保持布局的比率.

麻烦是Webkit没有正确计算高度,它在SVG图像周围增加了额外的像素(有时数百个); 这打破了布局.

如果您在Webkit浏览器中打开以下链接,您将看到绿色的额外像素区域.如果您在safari中使用开发人员inpspector,您将看到SVG的报告大小大于显示的SVG.

http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html

如果您在Firefox或Opera中打开链接,您将看到它应该工作的布局(这里的绿色是由我故意设置的边距引起的).

IE8有一个类似的问题,使用高度:自动修复,但这在Webkit中不起作用.

还有其他人有这个问题吗？有人有解决方案吗？

我认为它可能是一个Webkit错误(已经检查过夜间构建,问题仍然存在),但在我记录之前我想检查以确保没有其他人先解决问题.

Answer 1

svg { max-height: 100%; }

WebKit错误记录在这里:https://bugs.webkit.org/show_bug.cgi？ id = 82489

我还为bug跟踪器添加了变通方法.

Answer 2

我很难准确理解你想要的例子是什么，或者什么不是你想要的。但是，一般来说，如果您使用具有百分比宽度和高度容器的布局，并且希望内容填充这些容器，则需要将它们从流中取出（position:absolute在内容和/position:relative或position:absolute容器上使用）。

下面是一个可以在 Chrome 和 Safari 中找到的简单示例：
http://phrogz.net/SVG/size-to-fill.xhtml

div#foo的高度和宽度占主体的百分比。它有一个永远不会被看到的红色背景，因为 SVG 位于position:absolute其中并设置为完全填充它，并且有一个绿色背景。如果你看到红色，那就是一个错误。

#foo, svg { position:absolute }
#foo { left:20%; width:30%; top:5%; height:80%; background:red; }
svg  { top:0; left:0; width:100%; height:100%;  background:green; }

<div id="foo"><svg ...></svg></div>