缩放时，IE11中的SVG背景会被切断

Question

我们正在尝试在Internet Explorer中显示SVG背景。当使用100％以外的变焦时，我们的图像总是会被切断。这可以使用以下代码重现：

用这个svg

<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>

div {
  width: 14px;
  height: 14px;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' stroke='black' stroke-width='3' fill='red'%3E%3C/circle%3E%3C/svg%3E");
}

<div></div>

结果如下：

在所有其他浏览器中它渲染得很好。还有其他人遇到过这个bug吗？有解决方法吗？

Answer 1

我找到了一个需要很少工作的解决方法：

使SVG图像的大小为实际内容的2倍（这会使圆圈看起来像这样：

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200">
  <circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>

然后使用：after伪元素创建一个2x所需大小的内部元素。所以html将是

<div class="circle"></div>

而css将是

.circle {
    width: 14px;
    height: 14px;
    position:relative;
}
.circle:after {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
    background-repeat: no-repeat;
    background-image: url('circle.svg');
}

在pseoudoelement之后的额外空间提供了IE备用画布，但是原始容器占用的可见图标和空间都保持不变。