缩放时,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 伪元素创建一个具有 2 倍所需大小的内部元素。所以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');
}

:after 伪元素中的额外空间为 IE 提供了备用画布供绘图，但可见图标和原始容器占用的空间保持不变。