SVG作为IE背景图像与缩放

我已经SVG用作背景图像：SVG作为IE背景图像与缩放

<div class="buble"></div>

和CSS：

.buble 
{ 
    background-image: url(https://beta.creasoft.cz/Images/buble-small.svg); 
    background-repeat: no-repeat; 

    width: 48px; 
    height: 48px; 
}

当显示在IE 11和缩放（设定的缩放至105％或更多），它看起来破碎：在Chrome

工作正常。有没有办法解决它？

https://codepen.io/raptor/pen/WZoYBB

来源

2017-09-25 Raptor

IE11不支持SVG图像的缩放时明确指定viewBox，width和height属性。在你的情况下，你给图像width和height的48px，IE11将不想正确缩放。

要修复它，你可以使用一个容器。你需要做的第一件事是构建容器来容纳你的SVG。现在

<div id="container"> 
    <div class="buble"></div> 
</div>

你要定义你的容器，并添加width: 100%到.buble格，或SVG。

#container { 
    width: 48px; 
    height: 48px; 
} 
.buble { 
    width: 100%; 
    height: 100%; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-image: url('https://beta.creasoft.cz/Images/buble-small-test.svg'); 
}

您可能还需要确保height和width从实际的SVG文件本身删除，如果它包含它。您可以结帐this GitHub repo了解更多关于SVG's + IE的信息。

来源

2017-09-25 07:22:26

嗯，不起作用。试图创建固定大小的简单包装，但背景图像不显示在里面。内联svg与引用的一样。 https://codepen.io/raptor/pen/xXRMMv/ – Raptor

如果你可以使用内联（甚至是'img'）SVG而不是背景，那就容易了。看到这个[CodePen]（https://codepen.io/anon/pen/yzVwGB）。 –

这个“buble”用于整个网络的多个地方，它只是“背景”图像。它上面有文字等，所以我只想用CSS来使用它。我不想多次嵌入它。我现在明白，缩放在IE中是个问题，但仍然必须有一些解决方法。例如，这个更好。只有105％被打破。 https://codepen.io/raptor/pen/YrpgJE – Raptor

SVG作为IE背景图像与缩放

回答

相关问题