SVG不在IE11 div中心

Question

我有一个SVG里面的div，我试图通过使用绝对定位中心。在IE11上，SVG不在中心位置。当我删除绝对定位时，似乎IE11和Chrome上SVG的起点不同。在IE11上，SVG比Chrome浏览器更靠后几个像素。

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

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

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

jsFiddle

而且，这里是侧Chrome和IE11侧本地运行相同的代码的截图：

编辑：

它也出现像SVG是关闭当我检查它在IE开发工具：

Answer 1

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