错误的 IE11 SVG 渲染 - 背景图像答案

【问题标题】：Bad IE11 SVG rendering - background-image错误的 IE11 SVG 渲染 - 背景图像
【发布时间】：2015-06-06 05:53:54
【问题描述】：

我有一个 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;
}

有谁知道如何解决这个问题，或者至少告诉我为什么会这样？提前致谢！

【问题讨论】：

您可以将其余代码发布到 JSFiddle 吗？
@ShaunLoftin，您所说的“其余代码”是什么意思？你还想看什么？
这里有什么解决办法吗？我有同样的问题。 IE11 在 svg 渲染方面看起来很糟糕。

标签： css svg

【解决方案1】：

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

【讨论】：