Webkit浏览器中的SVG高度计算错误 [英] SVG height incorrectly calculated in Webkit browsers
问题描述
我有一个特定于Webkit浏览器（Safari和Chrome，在Mac和PC上）的问题。
I have a issue specific to Webkit browsers (Safari & Chrome, on Mac & PC).
我使用Raphael JS渲染SVG数据，使用响应式布局通过浏览器窗口缩放SVG。使用JQuery将SVG设置为100％宽度/高度。
I'm using Raphael JS to render SVG data and using a responsive layout to scale the SVGs with the browser window. The SVGs are set to 100% width/height using JQuery. The containing elements have their widths set in percentages to maintain the ratios of the layout as the page resizes.
麻烦的是Webkit不能正确计算高度，它增加了额外的围绕SVG图像的像素（有时数百）
Trouble is Webkit doesn't calculate the height correctly, it adds extra pixels (sometimes hundreds) around the SVG image; which breaks the layout.
如果在Webkit浏览器中打开以下链接，您将看到绿色的额外像素区域。如果您在safari中使用开发人员inpspector，您会看到SVG报告的大小大于显示的SVG。
If you open the following link in a Webkit browser you'll see the green extra pixel areas. If you use the developer inpspector in safari you'll see the reported size for the SVG is bigger than the SVG displayed.
http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html
如果你在Firefox或Opera中打开链接，你会看到它应该工作的布局（这里的绿色是由我故意设置的边距造成的）。
If you open the link in Firefox or Opera you'll see the layout as it should work (the green here is caused by margins I have deliberately set).
IE8有一个类似的问题，使用height：auto fixed，但这在Webkit中不起作用。
IE8 was having a similar problem which using height:auto fixed, but this won't work in Webkit.
还有其他人有这个问题吗？任何人都有解决方案？
Has anybody else had this problem? Anybody have a solution?
我认为它可能是一个Webkit错误（检查每夜构建已经，问题仍然存在），但在我记录之前，我认为检查确保没有人首先有解决方案。
I think it may be a Webkit bug (checked the nightly build already, issue persists), but before I log it I thought check to make sure nobody else has a solution first.
推荐答案
svg { max-height: 100%; }
此处记录的WebKit错误： https://bugs.webkit.org/show_bug.cgi?id=82489
WebKit bug documented here: https://bugs.webkit.org/show_bug.cgi?id=82489
我还添加了解决方法到错误跟踪器。
I also added the workaround to the bug tracker.
这篇关于Webkit浏览器中的SVG高度计算错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
