Internet Explorer 9 和 10 中的 SVG 背景大小不同答案

【问题标题】：SVG background size differs in Internet Explorer 9 & 10Internet Explorer 9 和 10 中的 SVG 背景大小不同
【发布时间】：2013-04-12 02:36:29
【问题描述】：

我一直在尝试使用 SVG 作为背景图像，以便使用 background-size-property 对其进行缩放。这在大多数当前浏览器中都很好用，但 Internet Explorer 似乎误解了这些值，当我只使用一个值时，显示的图像尺寸要小得多，而使用两个值的比例不正确。

我在http://jsfiddle.net/c7DEw/1/ 上举了一个例子

svg 的宽度和高度已设置为 100%。我认为这与viewBox 和enable-background 属性有关，但这些似乎没有任何作用。

这在 Internet Explorer 9 和 10 中都会发生。

以前有人遇到过这种行为吗？如果是这样，您是如何解决的？

【问题讨论】：

7,8,9,10...哪个？
也许这可以帮助你css-tricks.com/using-svg 但我想应该可以工作也许是浏览器功能问题。
我今天早些时候阅读了 Chris 的文章，并在 IE 中测试了他的版本，似乎可以正常工作。虽然他没有后台版本的示例，但代码似乎大致相同。
你找到答案了吗？我遇到了同样的问题。
如果我没记错的话，这个问题是由我从一篇文章中记错的东西引起的。我已将 SVG 的宽度和高度更改为 100%（请参阅我小提琴的 JS 部分），Internet Explorer 的解释似乎与其他浏览器不同。

标签： css svg internet-explorer-9 internet-explorer-10

【解决方案1】：

我刚刚在另一个项目中又遇到了这个问题。我将 Illustrator 设计中的资源单独复制到一个新文件中，并将画板更改为与其边界框完美对齐。然后我通过 CSS background-property 包含 SVG，并注意到 IE10 和 IE11 中的显示尺寸都较小。

然后在 Illustrator 中重新打开资源，将它们复制到 Sketch 并将它们导出到 SVG 后，这种行为就消失了。

Illustrator 似乎正在创建尺寸不正确的画板（或容器），从而导致尺寸不正确。但是我已经多次搜索了这个问题并且没有发现其他人遇到这个问题，所以这可能是我做错了。但是这个过程非常简单，我无法想象它会是什么。

【讨论】：

【解决方案2】：

Illustrator 生成的用作背景图像的 svg 文件也有类似的问题，经过反复试验，修复似乎只是编辑每个 svg 文件并将 svg 的宽度和高度声明为属性，例如<svg width="32px" height="128px">（Illustrator 没有设置但 Sketch 设置的东西）。这导致 svg 在 IE 10/11 中的行为与在 Chrome/FF 中的行为相同。

【讨论】：

谢谢：我刚刚用同样的修复程序遇到了同样的问题。在我向
在 IE9 中为我修复了这个问题
谢谢！这为我解决了这个问题。我还需要将宽度和高度值与 viewbox 属性中的值匹配。