0

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: enter image description here

EDIT:

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

enter image description here

chopper draw lion4
  • 12,401
  • 13
  • 53
  • 100

2 Answers2

0

Try to add preserveAspectRatio="xMidYMin meet" in your svg elenent (see https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute for more info) and remove width and height attributes (see https://stackoverflow.com/a/9792254/895007).

Alexander
  • 4,420
  • 7
  • 27
  • 42
0

Try the following:

position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
height: $desiredHeightInPixels;
width: 100%;
Heloá
  • 53
  • 1
  • 8