SVG背景大小在Internet Explorer 9和10中不同

Question

我一直试图在元素中使用SVG作为背景图像，并使用background-size属性缩放它。这在大多数现代浏览器中效果很好，但Internet Explorer似乎会误解这些值，在只使用一个值时显示图像的尺寸要小得多，并且在使用两个值时显示不正确的比例。

我已经在http://jsfiddle.net/c7DEw/1/上提供了一个示例。

SVG的宽度和高度已设置为100％。我认为这与viewBox和enable-background属性有关，但这些属性似乎没有任何效果。

这种情况发生在Internet Explorer 9和10中。

有人遇到过这种行为吗？如果有，你是如何解决的？

- ChezFre

---

7、8、9、10……哪一个？ - Dan Kanze

也许这可以帮助你 http://css-tricks.com/using-svg/ 但我猜可能是浏览器功能问题。 - ncubica

我今天早些时候阅读了克里斯的文章，并在IE中测试了他的版本，似乎按预期工作。虽然他没有提供背景版本的示例，但代码似乎大部分相同。 - ChezFre

你找到答案了吗？我也遇到了同样的问题。 - wushudude

如果我没记错的话，问题是由于我从一篇文章中错误地记住了某些内容引起的。我已经将SVG的宽度和高度更改为100％（请参见我的fiddle的JS部分），这似乎与其他浏览器不同，因此在Internet Explorer中会出现问题。 - ChezFre

谢谢。对我有效的方法是，在SVG中声明一个大小、宽度和高度，似乎大小并不重要，因为我可以通过CSS进行更改。只是简单地声明一个大小意味着IE将与其他浏览器表现相同。 - wushudude

Answer 1

我曾遇到一个相似的问题，那就是使用Illustrator生成作为背景图像的SVG文件。在经过多次尝试后，修复的方法似乎就是编辑每个SVG文件并声明其宽度和高度作为属性，例如：<svg width="32px" height="128px"> （这是Illustrator不会设置但Sketch会设置的）。这使得这些SVG在IE 10/11中表现与Chrome / FF相同。

- Benvoluto

---

谢谢：我遇到了同样的问题，使用了相同的解决方法。我的SVG文件具有viewBox属性，但显示的尺寸比指定的要小得多，直到我在<svg>标签中添加了高度和宽度属性。 - Chris Adams

在IE9中为我修复了这个问题。 - cloakedninjas

谢谢！这个解决方案对我很有帮助。我还需要将宽度和高度值与视口属性中的值匹配。 - James Hill

Answer 2

我又在另一个项目中遇到了这个问题。我将Illustrator设计中的资产逐个复制到新文件中，并更改画板以与其边界框完全对齐。然后，我通过CSS背景属性包含了SVG，并注意到在IE10和IE11中显示尺寸较小。

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

看起来Illustrator创建了一个大小不正确的画板（或容器），从而扰乱了尺寸。但我已经多次搜索了这个问题，没有发现其他人遇到过这个问题，所以可能是我做错了什么。但这个过程非常简单，我无法想象可能会出现什么问题。

- ChezFre