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上进行调试，但是在它上进行开发是非常滞后和费力的。

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

jsFiddle

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

​

编辑：

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

​

​

Answer 1

尝试在您的svg元素中添加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%;