IE 以我的 svg 为中心答案

【问题标题】：IE is centering my svgIE 以我的 svg 为中心
【发布时间】：2016-08-24 13:31:30
【问题描述】：

知道为什么会这样吗？

如果您将以下内容粘贴到 chrome 中的新 codepen.io 中，它会显示一个勾号，并且位于左上角。

但是在 IE 中查看它并且它在页面中间

<svg version="1.1" class="pull-left svg-header-tick" xmlns="http://www.w3.org/2000/svg" height="22px" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92 72" enable-background="new 0 0 92 72" xml:space="preserve"><g><path class="svgcolor" d="M28.1,71.8L1.9,45.6c-2.3-2.3-2.3-6.1,0-8.5c2.3-2.3,6.1-2.3,8.5,0l17.8,17.8L81,2c2.3-2.3,6.1-2.3,8.5,0
    c2.3,2.3,2.3,6.1,0,8.5L28.1,71.8z"></path></g>
                                </svg>

【问题讨论】：

标签： html css internet-explorer svg

【解决方案1】：

在我的快速测试中，似乎只设置height IE（不是Edge - 它看起来不错）水平拉伸整个svg 元素。如果添加width 属性，它会弹回左上角。如果你在 CSS 中设置高度和宽度，它也可以工作。

From CSS Tricks:

许多浏览器（IE、Safari 以及 2014 年夏季之前发布的 Opera 和 Chrome 版本）不会自动调整内联 SVG 的大小。如果您没有同时指定高度和宽度，这些浏览器将应用它们通常的默认尺寸，正如前面提到的，对于不同的浏览器，这些尺寸会有所不同。图像将缩放以适应该高度或宽度，再次在其周围留下额外的空白。同样，如果将高度和宽度都设为自动，会发生什么不一致。

【讨论】：