SVG作为IE中的背景图像与缩放

Question

我将SVG用作背景图片：

<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

Answer 1

当明确指定viewBox，width和height属性时，

IE11 不支持缩放SVG图像。在您的情况下，您要提供width和height 48px的图像，而IE11将无法正确缩放。

要修复它，您只需使用容器即可。您需要做的第一件事是构建容器以容纳您的SVG。

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

现在，您需要定义容器，并将width: 100%添加到.buble div或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');
}

您可能还需要确保从实际的SVG文件中删除height和width（如果它包含它）。您可以查看this GitHub repo以获取有关SVG + IE的更多信息。