在IE11上，SVG不是div的中心

Question

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

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

这让我相信它根本不是一个定位问题，而是在IE11上进行SVG显示或定位之间存在一些根本区别。我正在使用VM在IE11上进行调试，但是它非常滞后且难以开发。

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

jsFiddle

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

编辑：

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

Answer 1

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

Answer 2

尝试以下操作：

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