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 回答