SVG 高度在 Webkit 浏览器中计算不正确答案

【问题标题】：SVG height incorrectly calculated in Webkit browsersSVG 高度在 Webkit 浏览器中计算不正确
【发布时间】：2011-09-27 14:35:03
【问题描述】：

我有一个特定于 Webkit 浏览器（Safari 和 Chrome，Mac 和 PC 上）的问题。

我正在使用 Raphael JS 呈现 SVG 数据，并使用响应式布局通过浏览器窗口缩放 SVG。使用 JQuery 将 SVG 设置为 100% 宽度/高度。包含元素的宽度以百分比设置，以在页面调整大小时保持布局的比例。

问题在于 Webkit 没有正确计算高度，它在 SVG 图像周围添加了额外的像素（有时是数百个）；这破坏了布局。

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

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

如果您在 Firefox 或 Opera 中打开链接，您会看到布局正常（这里的绿色是我故意设置的边距造成的）。

IE8 遇到了类似的问题，使用 height:auto 已修复，但这在 Webkit 中不起作用。

还有其他人遇到过这个问题吗？有人有解决办法吗？

我认为这可能是一个 Webkit 错误（已经检查了夜间构建，问题仍然存在），但在我记录它之前，我想先检查以确保没有其他人有解决方案。

【问题讨论】：

我仍在努力了解您想要什么。我已将您的示例缩减为（希望）是一个更简单的测试用例：phrogz.net/SVG/find-a-room.xhtml 如果此文件显示您的问题，请描述您想要看到的内容，以及您所看到的内容（以及操作系统/浏览器/版本） ) 你看到这个了。
好的，我遇到的问题出现在所有版本的 Webkit 中（也就是说，Safari OS X 和 Windows、iOS 上的 Safari Mobile、Chrome OS X 和 Windows）。问题是，尽管 SVG 以正确的大小显示（其高度与宽度成比例确定，并且由于其容器以百分比设置，因此可以很好地无限缩放）其高度未正确报告，从而导致容器SVG 的位置比显示的 SVG 高。
从逻辑上讲，HTML通过里面的内容来定义容器的高度；除非设计师明确限制。因此，SVG 容器的高度（在上面的示例中
）应该与显示的 SVG 的高度相同。
使用 Safari Develop 工具检查 SVG，我的浏览器屏幕的当前宽度，SVG 的尺寸为 516x1075px。您可以用肉眼看到 SVG 不高于其宽度。 SVG 在宽度 516px 处的高度为 526px（原始高度 288px / 原始宽度 282px * 当前宽度 516 = 526px），这是 SVG 显示的尺寸。但是因为高度值计算不准确
认为它的高度应该是 1075，因此是绿色区域。
以下 Javascript/JQuery 代码修复了该问题。 function fixWebkitHeightBug(){ /* 调整校园元素的大小 */ var CampusW = 282; var 校园H = 288; var curCampusW = $('#campus').width(); var newCampusH = heightInRatio(campusH,campusW,curCampusW); $('#campus').height(newCampusH);函数 heightInRatio(oH,oW,nW){ 返回 (oH / oW * nW); } } $(window).resize(function() { fixWebkitHeightBug(); }); $(document).ready(function() { fixWebkitHeightBug(); });

标签： css webkit svg

【解决方案1】：

svg { max-height: 100%; }

此处记录的 WebKit 错误：https://bugs.webkit.org/show_bug.cgi?id=82489

我还在错误跟踪器中添加了解决方法。

【讨论】：

我要补充一点，这个错误会错误地计算 SVG 的宽度和高度。也就是说，如果没有定义 height 或 max-height，则会错误计算自动高度，如果没有定义 width 或 max-width，则会错误计算自动宽度。在我的情况下，当使用绝对定位时，将最大高度/宽度设置为百分比可能不起作用，在这种情况下，您可以使用非常大的 px 或 em 大小。就我而言，我有 1000em，比任何 SVG 都大得多。
就我而言，我还需要添加max-width:100%;，谢谢！
有趣的是，我有一个具有宽度、高度、视图框和 preserveAspectRatio 表示属性的 SVG，而 max-width: 100% 导致它破坏了纵横比并具有更小的宽度。删除 max-width 是为我解决的问题。

【解决方案2】：

Safari 也有类似的问题。案例是 svg 的宽度和高度被渲染为 dom 元素属性（在我的例子中 width="588.75px" height="130px"）。在 css 中定义宽度和高度无法覆盖此尺寸设置。

为了为 Safari 解决这个问题，我从 SVG 文件中删除了宽度和高度信息，同时保持 viewBox 不变（您可以使用任何文本编辑器编辑 .svg 文件）。

我的 .svg 文件的 Git diff sn-p：

    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"

【讨论】：

但是您的图像框将不是所需的大小。它将延伸到容器。例如，如果您的图像宽度是 100 像素，但容器是 200 像素，它会填满容器，这是不合理的。
您可以添加一个 div 包装器来正确调整您的 SVG 大小

【解决方案3】：

我只是在 svg 中将高度设置为非常大的尺寸以保持纵横比。使用 100% 会带来太多问题。这对我来说效果更好，因为我不想使用 js。

完整的道具： http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/

width="1200" height="235.5"

【讨论】：

【解决方案4】：

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

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

#foo div 的高度和宽度占主体的百分比。它有一个永远不会看到的红色背景，因为 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>

【讨论】：

感谢您的回复，以及您在示例中投入的时间。这不是我正在寻找的行为。您正在定义容器的大小，然后将 SVG 缩放到该大小。我需要容器的大小由 SVG 的大小来控制，这就是为什么 SVG 高度的错误计算会搞砸的原因。在我的示例中，您可以看到 SVG 的区域，容器的宽度始终与 SVG 的宽度匹配，但高度完全错误；这就是为什么我认为这可能是一个错误。谢谢，巴里
感谢您的澄清。所以你和 SVG 有一个基于视口百分比的大小，并准确地移动它们的容器？我将为此创建一个示例。我不确定这与我创建的（最终结果）有何不同，但希望它会有所帮助。
我使用 JQuery 解决了这个问题。在 window.resize 上，我获取容器的宽度，然后运行这个公式（原始高度/原始宽度 * 当前宽度），它给出了当前 SVG 宽度的高度比率，并将容器高度设置为该值。用 JQuery 修复渲染问题并不是很好，但是，它可以工作:)
我同意：使用脚本不是解决这个问题的正确方法（不管它是什么）。我在上面的问题中添加了评论，试图帮助您将其简化为一个简单的测试用例。如果你能清楚地表达你想要发生的事情（尤其是如果你可以减少它more than I have），我们很可能不用 JavaScript 就可以解决你的问题。

【解决方案5】：

这是一个已知问题，Chromium 团队已在版本 15.0.874.121 中修复。我今天自己验证了这个修复。

http://code.google.com/p/chromium/issues/detail?id=98951#c27

【讨论】：

那么这将进入 Webkit 的夜间构建和生产环境吗？我希望这是一个修复，会让生活更轻松:-)

【解决方案6】：

我知道如何解决它，您只需将其放在 svg 文件的开头：“preserveAspectRatio="xMinYMin none" 它必须像这样放入 svg 标签中：

问题会解决

【讨论】：

我敢肯定，在我发帖之前我已经尝试过了。纵横比本身并不是问题，而是错误报告的高度导致了问题。问题的答案是 JQuery，正如我在这里写的：brichards.co.uk/blog/webkit-svg-height-bug-workaround

【解决方案7】：

如前所述，WebKit 对 SVG 的缩放最近有所改进。在我看来，它在当前的 Safari（5.1 版，WebKit 534）中仍然很糟糕。我做了一些实验并将我的发现记录在我的网站上： http://www.vlado-do.de/svg_test/ 简而言之：使用

【讨论】：

【解决方案8】：

我发现添加“位置：绝对；”到图像元素（如果它在也绝对定位的父元素中），我的 .svg 被调用，使“高度：100%;”声明变得相对于它的容器而不是页面/浏览器/设备。

在适用于 iOS 7.1 的 Chrome 和 Safari（移动 webkit）上对此进行了测试，它解决了我的问题（.svg 文件超出了它的容器）。

希望这对于遇到麻烦的其他人来说是一个可靠的解决方案。值得一试吗？

【讨论】：

【解决方案9】：

我遇到了 Javascript 为 SVG 返回不正确的“高度”值的问题，我发现解决方案只是在 window.load 而不是 document.ready 上运行我的脚本（需要访问高度的位）。

document.ready 在 DOM 准备就绪时触发，但此时图像不一定已渲染。在window.load 触发时，图像将被加载（因此浏览器将能够正确访问它们的尺寸）。

【讨论】：