SVG not center in div on IE11

Question

I have an SVG inside a div that I am trying to center by using absolute positioning. On IE11 the SVG is off-center though. When I remove the absolute positioning it appears that the starting point of the SVG is different on IE11 and Chrome. On IE11 the SVG is a few pixels further down the page then on Chrome.

I tried using a Flexbox solution instead of absolute positioning, but the same issue persists. Even when using align-items: center and justify-content: center , the IE11 version was a few pixels lower than the Chrome version.

This leads me to believe it is really not a positioning issue at all, but rather there is some fundamental difference between SVG display or positioning on IE11. I am using a VM to debug on IE11 but it is extremely laggy and pain-staking to develop on.

Is there some fundamental difference between display/positioning of SVG's on IE11? Can someone shed some light on this strange behavior?

jsFiddle

Also, here is a screenshot of the same code running locally on both Chrome and IE11 side by side:

EDIT:

It also appears like the SVG is off when I inspect it in IE dev tools:

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

Try the following:

position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
height: $desiredHeightInPixels;
width: 100%;