CSS 在 Webkit 浏览器中错误计算的 SVG 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7570917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG height incorrectly calculated in Webkit browsers
提问by Barry
I have a issue specific to Webkit browsers (Safari & Chrome, on Mac & PC).
我有一个特定于 Webkit 浏览器（Safari 和 Chrome，Mac 和 PC）的问题。
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.
我正在使用 Raphael JS 来呈现 SVG 数据，并使用响应式布局在浏览器窗口中缩放 SVG。SVG 使用 JQuery 设置为 100% 宽度/高度。包含元素的宽度以百分比设置，以在页面调整大小时保持布局的比例。
Trouble is Webkit doesn't calculate the height correctly, it adds extra pixels (sometimes hundreds) around the SVG image; which breaks the layout.
问题是 Webkit 没有正确计算高度，它在 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.
如果您在 Webkit 浏览器中打开以下链接，您将看到绿色的额外像素区域。如果您在 safari 中使用开发人员检查器，您将看到报告的 SVG 大小大于显示的 SVG。
http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html
http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html
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).
如果您在 Firefox 或 Opera 中打开链接，您将看到它应该工作的布局（这里的绿色是由我故意设置的边距引起的）。
IE8 was having a similar problem which using height:auto fixed, but this won't work in Webkit.
IE8 有一个类似的问题，使用 height:auto 固定，但这在 Webkit 中不起作用。
Has anybody else had this problem? Anybody have a solution?
有没有其他人遇到过这个问题？有人有解决方案吗？
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.
我认为这可能是一个 Webkit 错误（已经检查了每晚构建，问题仍然存在），但在我记录它之前，我想先检查以确保没有其他人有解决方案。
回答by zachleat
svg { max-height: 100%; }
WebKit bug documented here: https://bugs.webkit.org/show_bug.cgi?id=82489
此处记录的 WebKit 错误：https: //bugs.webkit.org/show_bug.cgi?id =82489
I also added the workaround to the bug tracker.
我还将解决方法添加到错误跟踪器中。
回答by Sebastiaan Ordelman
I had a similar problem for Safari. Case was that the svg width and height were rendered as dom element attributes (in my case width="588.75px" height="130px"). Defining width and height in css could not overwrite this dimension setting.
我在 Safari 上遇到了类似的问题。案例是 svg 宽度和高度被渲染为 dom 元素属性（在我的例子中 width="588.75px" height="130px"）。在 css 中定义宽度和高度无法覆盖此尺寸设置。
To fix this for Safari I removed the width and height information from the SVG file while keeping viewBoxintact (you can edit .svg files with any text editor).
为了在 Safari 中解决这个问题，我从 SVG 文件中删除了宽度和高度信息，同时保持viewBox完好无损（您可以使用任何文本编辑器编辑 .svg 文件）。
Git diff snippet of my .svgfile:
我的.svg文件的Git diff 片段：
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 588.75 130"
- height="130"
- width="588.75"
xml:space="preserve"
version="1.1"
回答by Nick F
I was having a problem with Javascript returning incorrect "height" values for SVGs, and I found the solution was simply to run my script (the bit that needed to access the height) on window.loadrather than document.ready.
我遇到了 Javascript 为 SVG 返回不正确的“高度”值的问题，我发现解决方案只是运行我的脚本（需要访问高度的位）window.load而不是document.ready.
document.readyfires when the DOM is ready, but images have not necessarily been rendered at this point. At the point where window.loadfires, images will have been loaded (and thus the browser will be able to access their dimensions correctly).
document.ready当 DOM 准备好时触发，但此时图像不一定被渲染。在window.load触发时，图像将被加载（因此浏览器将能够正确访问它们的尺寸）。
回答by user2533951
I just set the height to a very large size in the svg to maintain the aspect ratio. Using 100% comes with too many problems. This works better for me because I did not want to use js.
我只是在 svg 中将高度设置为非常大的尺寸以保持纵横比。使用 100% 会带来太多问题。这对我来说效果更好，因为我不想使用 js。
Full props to: http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/
完整道具：http: //www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/
width="1200" height="235.5"
宽度="1200" 高度="235.5"
回答by Zanem
I found that adding "position: absolute;" to the image element (if it's within a parent that's also absolutely positioned), which had my .svg being called, made the "height: 100%;" declaration become relative to its container instead of the page/browser/device.
我发现添加“位置：绝对；” 到图像元素（如果它在也绝对定位的父元素中），我的 .svg 被调用，使得“高度：100%；” 声明变得相对于它的容器而不是页面/浏览器/设备。
Tested this on both Chrome and Safari (mobile webkit) for iOS 7.1, and it fixed my problem (the .svg file was going way outside of its container).
在 iOS 7.1 的 Chrome 和 Safari（移动 webkit）上对此进行了测试，它解决了我的问题（.svg 文件超出了它的容器）。
Hopefully this a somewhat reliable fix for others here who were having trouble. Worth a shot?
希望这对于在这里遇到问题的其他人来说是一个有点可靠的解决方案。值得一试？
回答by Phrogz
It's hard for me to understand exactly what you want with your example, or what is not as you intend it. However, in general, if you are using a layout with percentage widths and height containers and you want content to fill those containers, you need to take them out of the flow (using position:absoluteon the content and position:relativeor position:absoluteon the containers).
我很难确切地理解你想要什么你的例子，或者什么不是你想要的。但是，一般来说，如果您使用具有百分比宽度和高度容器的布局，并且您希望内容填充这些容器，则需要将它们从流中取出（position:absolute在内容和/position:relative或position:absolute容器上使用）。
Here's a simple example that works find in Chrome and Safari:
http://phrogz.net/SVG/size-to-fill.xhtml
这是一个可以在 Chrome 和 Safari 中找到的简单示例：http:
//phrogz.net/SVG/size-to-fill.xhtml
The #foodiv has its height and width as a percentage of the body. It has a red background that will never be seen because the SVG is position:absoluteinside it and set to fill it completely, and have a green background. If you ever see red, it is an error.
该#foodiv有其高度和宽度作为身体的百分比。它有一个永远不会被看到的红色背景，因为 SVGposition: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>
回答by TimDog
This is a known issue that has been fixed by the Chromium team with version 15.0.874.121. I verified this fix myself just today.
这是一个已知问题，已由 Chromium 团队在 15.0.874.121 版中修复。我今天自己验证了这个修复。
http://code.google.com/p/chromium/issues/detail?id=98951#c27
http://code.google.com/p/chromium/issues/detail?id=98951#c27
回答by timoun
i know how to fix it, you have just to put this at the begining of your svg file: "preserveAspectRatio="xMinYMin none" it must be into svg tag like this:
我知道如何修复它，您只需将其放在 svg 文件的开头：“preserveAspectRatio="xMinYMin none”它必须像这样放入 svg 标签中：
Problem will be fix
问题将得到解决
回答by Vlado
As previously pointed out WebKit's scaling of SVG improved recently. It is still quite broken in the current Safari (version 5.1, WebKit 534), in my opinion. I did a few experiments and recorded my findings on my website: http://www.vlado-do.de/svg_test/In short: embedding svg with <object> works under most conditions in WebKit 535. For older WebKit I embed it in an <img> tag. That's fine if you don't want links inside your svg (but it does not work in older Gecko and strangely also is problematic in current Chromium).
正如之前所指出的，WebKit 对 SVG 的缩放最近有所改进。在我看来，它在当前的 Safari（5.1 版，WebKit 534）中仍然很糟糕。我做了一些实验并在我的网站上记录了我的发现： http://www.vlado-do.de/svg_test/ 简而言之：在 WebKit 535 中的大多数情况下，嵌入带有 <object> 的 svg 都可以工作。对于较旧的 WebKit，我将其嵌入在 <img> 标签中。如果您不想在 svg 中使用链接，那很好（但它在较旧的 Gecko 中不起作用，而且奇怪的是在当前的 Chromium 中也有问题）。
