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

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

Answer 2

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

要为Safari修复此问题，我在保留 viewBox 的同时从SVG文件中删除了宽度和高度信息（您可以使用任何文本编辑器编辑.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"

Answer 3

我很难准确理解你想要的例子，或者你想要的不是什么。但是，通常情况下，如果您使用的是具有百分比宽度和高度容器的布局，并且您希望内容填充这些容器，则需要将它们从流中取出（在内容上使用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>

Answer 4

这是一个已知问题，已由Chromium团队修复，版本为15.0.874.121。我今天才核实这个问题。

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

Answer 5

我知道如何修复它，你只需要把它放在你的svg文件的开头：“preserveAspectRatio =”xMinYMin none“它必须是这样的svg标签：

问题将得到解决

Answer 6

如前所述，WebKit的SVG缩放最近有所改善。在我看来，它在当前的Safari（版本5.1，WebKit 534）中仍然相当破碎。我做了一些实验并在我的网站上记录了我的发现： http://www.vlado-do.de/svg_test/ 简而言之：使用＆lt; object＆gt;嵌入svg适用于WebKit 535中的大多数情况。对于较旧的WebKit，我将其嵌入＆lt; img＆gt;标签。如果你不想在你的svg中找到链接，这很好（但是在旧的Gecko中不起作用，奇怪的是在当前的Chromium中也存在问题）。

Answer 7

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

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

width =“1200”height =“235.5”

Answer 8

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

在适用于iOS 7.1的Chrome和Safari（移动网络套件）上进行了测试，它解决了我的问题（.svg文件已经超出了容器的范围）。

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

Answer 9

我遇到的问题是Javascript返回错误＆＃34; height＆＃34; SVG的值，我发现解决方案只是在window.load而不是document.ready上运行我的脚本（访问高度所需的位）。

当DOM准备好时，

document.ready会触发，但此时不一定要渲染图像。在window.load触发的位置，图像将被加载（因此浏览器将能够正确访问其尺寸）。

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

9 个答案: