IE正在集中我的svg [英] IE is centering my svg

问题描述

任何想法为什么会发生这种情况？

any idea why this is happening?

如果您将以下内容粘贴到Chrome中的新codepen.io中，则会显示罚款并且位于左上方

If you paste the following into a new codepen.io in chrome it displays a tick fine and it is in the top left hand corner.

然而，在IE中查看它并在页面中间右侧

However view it in IE and its right in the middle of the page

http://codepen.io/anon/pen/RaeYjd

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

推荐答案

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

In my quick tests it seems that by only setting height IE (not Edge - it looks fine there) is stretching the entire svg element horizontally. If you add a width attribute, it snaps back to the top left corner. It also works if you set height and width in CSS.

来自CSS技巧：

许多浏览器 - IE，Safari以及夏季之前发布的Opera和Chrome版本2014年 - 不会自动调整内联SVG。如果您没有同时指定高度和宽度，这些浏览器将应用其通常的默认大小，如前所述，对于不同的浏览器，这些大小会有所不同。图像将缩放以适合该高度或宽度，同样在其周围留下额外的空白。同样，如果你自动保留高度和宽度，也会出现不一致的情况。

Many browsers—IE, Safari, and versions of Opera and Chrome released prior to summer 2014—will not auto-size inline SVG. If you don't specify both height and width, these browsers will apply their usual default sizes, which as mentioned previously will be different for different browsers. The image will scale to fit inside that height or width, again leaving extra whitespace around it. Again, there are also inconsistencies in what happens if you leave both height and width auto.

这篇关于IE正在集中我的svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！