7

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

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

svg 的宽度和高度已设置为 100%。我认为它与viewBoxandenable-background属性有关，但这些似乎没有任何影响。

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

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

4

2 回答 2

12

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

于 2014-06-06T20:57:22.047 回答
0

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

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

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

于 2014-04-10T09:46:27.563 回答