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）。