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の位置付けとの間にいくつかの基本的な違いがあると私に思います。私はIE11上でデバッグするためにVMを使用していますが、開発が非常に遅く、苦労しています。

IE11でのSVGの表示/配置にはいくつかの基本的な違いがありますか？誰かがこの奇妙な行動について何か光を当てることはできますか？

jsFiddle

また、ここではサイドでChromeとIE11側の両方でローカルに実行されている同じコードのスクリーンショットです：

EDIT：

SVGがオフになっているようにまた表示されます私はIEのツールでそれを調べるとき：

Answer 1

あなたのsvg elenentにpreserveAspectRatio="xMidYMin meet"を追加してください（詳細についてはhttps://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttributeを参照）、幅と高さの属性を削除してください（https://stackoverflow.com/a/9792254/895007を参照）。