SVG不在IE11上的div中答案

【问题标题】：SVG not center in div on IE11SVG不在IE11上的div中
【发布时间】：2017-09-21 09:51:29
【问题描述】：

我在 div 中有一个 SVG，我试图通过使用绝对定位来居中。在 IE11 上，SVG 是偏离中心的。当我删除绝对定位时，SVG 的起点在 IE11 和 Chrome 上似乎不同。在 IE11 上，SVG 位于页面下方几个像素处，然后在 Chrome 上。

我尝试使用 Flexbox 解决方案而不是绝对定位，但同样的问题仍然存在。即使使用align-items: center 和justify-content: center，IE11 版本也比 Chrome 版本低几个像素。

这让我相信这根本不是定位问题，而是 SVG 显示或 IE11 上的定位之间存在一些根本区别。我正在使用虚拟机在 IE11 上进行调试，但开发起来非常缓慢和痛苦。

在 IE11 上显示/定位 SVG 有什么根本区别吗？有人能解释一下这种奇怪的行为吗？

另外，下面是在 Chrome 和 IE11 本地同时运行的相同代码的屏幕截图：

编辑：

当我在 IE 开发工具中检查 SVG 时，它似乎也关闭了：

【问题讨论】：

【解决方案1】：

尝试在您的 svg 元素中添加 preserveAspectRatio="xMidYMin meet"（请参阅 https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute 了解更多信息）并删除宽度和高度属性（请参阅 https://stackoverflow.com/a/9792254/895007）。

【讨论】：

【解决方案2】：

尝试以下方法：

position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
height: $desiredHeightInPixels;
width: 100%;

【讨论】：