坏IE11 SVG渲染 - 背景图像

Question

我有一个SVG图像作为背景，background-size:contain。 在除IE之外的所有浏览器中，它看起来很完美但是，在IE中，徽标的底部略微被切除，边缘模糊。我尝试了this（从SVG文件中删除了设置的宽度和高度）和this（在下面添加了一个边距）但它仍然被切断了，并且无法找到有关模糊的内容边缘。

IE11渲染：

Chrome / Firefox渲染：

这是我的CSS，用于显示该图片：

.header-container::before {
   content: "";
   display: block;
   width: 15em;
   padding: 0.825em 0;
   background-image: url('reed-logo-white.svg?1427895453');
   background-position: 0 0;
   background-repeat: no-repeat;
   background-color: transparent;
   background-size: contain;
   margin: 1em auto;
}

有谁知道如何解决这个问题，或者至少告诉我它为什么会发生这种情况？ 提前谢谢！

Answer 1

我也对这个问题感到沮丧。我找到的唯一解决方案是重新保存我的SVG文件，以便： 1）画板尺寸是像素整数（没有分数），和 2）如果不起作用，请在画板尺寸（宽度或高度）上添加2px，以在图稿周围添加更多空白区域