SVG 不在 IE11 上的 div 中心

Question

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

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

这让我相信这根本不是定位问题，而是 SVG 显示或 IE11 上的定位之间存在一些根本区别。 我正在使用 VM 在 IE11 上进行调试，但在其上进行开发非常缓慢且费力。

在 IE11 上显示/定位 SVG 之间有什么根本区别吗？ 有人可以对这种奇怪的行为有所了解吗？

js小提琴

此外，这里是在 Chrome 和 IE11 上并排运行的相同代码的屏幕截图：

编辑：

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

Answer 1

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

Answer 2

请尝试以下操作：

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