css - 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

IE11 不支持 viewBox、width 和 height 属性缩放 SVG 图片明确规定。在您的情况下，您要提供 48px 的图像和 width 和 height，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');
}

您可能还需要确保 height 和 width 已从实际 SVG 文件本身(如果包含)中删除。你可以结账 this GitHub repo有关 SVG + IE 的更多信息。