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%;