当前位置：文江博客话题详情

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

发布于 2024-12-06 21:58:18 字数 734 浏览 1 评论 0原文

我遇到了特定于 Webkit 浏览器（Mac 和 PC 上的 Safari 和 Chrome）的问题。

我使用 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 错误（已经检查了夜间构建，问题仍然存在），但在我记录它之前，我想先检查一下以确保其他人没有解决方案。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

征﹌骨岁月お 2024-12-13 21:58:18

svg { max-height: 100%; }

WebKit 错误记录如下： https://bugs.webkit.org/show_bug.cgi?id= 82489

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

svg { max-height: 100%; }

WebKit bug documented here: https://bugs.webkit.org/show_bug.cgi?id=82489

I also added the workaround to the bug tracker.

回复收藏 0 原文

青春如此纠结 2024-12-13 21:58:18

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

为了修复 Safari 的此问题，我从 SVG 文件中删除了宽度和高度信息，同时保持 viewBox 完整（您可以使用任何文本编辑器编辑 .svg 文件）。

我的 .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"

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.

To fix this for Safari I removed the width and height information from the SVG file while keeping viewBox intact (you can edit .svg files with any text editor).

Git diff snippet of my .svg file:

    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"

回复收藏 0 原文

甜味超标? 2024-12-13 21:58:18

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

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

宽度=“1200”高度=“235.5”

回复收藏 0 原文

知足的幸福 2024-12-13 21:58:18

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

下面是一个可以在 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>

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:absolute on the content and position:relative or position:absolute on the containers).

Here's a simple example that works find in Chrome and Safari:
http://phrogz.net/SVG/size-to-fill.xhtml

The #foo div 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:absolute inside it and set to fill it completely, and have a green background. If you ever see red, it is an error.

#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; }