SVG位置：在IE 11中为绝对 [英] SVG position:absolute in IE 11

问题描述

有一个放置在容器中的SVG对象。

of I have an SVG object placed in a container. It has the following CSS on its class.

.container{
    position: relative;
}

.svgObj{
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
}

因此，问题在于svg不会以容器的0：0 ，但更像是在容器以南200像素之内。

So, the problem is that the svg doesn't end up in 0:0 of the container but rather more like in 200px south of that.

奇怪的是，如果我用SVG标签替换DIV

The queer thing is that if I substiute the SVG tag for a DIV with the same class, it displays exactly where I want it to.

问题仅在IE中明显（仅尝试了11，但在较早的版本中也可能出现）。 。
好​​吧，此问题在Minori中也很明显。
在Safari，Chrome，FF，Opera和其他大型浏览器中都可以正常工作，但IE除外。

The problem is only apparent in IE (only tried 11, but likely there in earlier versions as well). Well, fwiw the problem is also visible in Minori. Works fine in Safari, Chrome, FF, Opera, well the bigs, except IE.

任何想法都非常受欢迎。

Any ideas are most welcome.

HTML代码如下

<div class="container">
<svg class="svgObject" data-x="0" data-y="0" data-text="My Obj"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <a id="h-72417" href="#">
        <path d="M12 4a8 0z"></path>
        <path d="M12 4a8 0-16z"></path>
    </a>
</svg>
</div>

不要在意路径值，我在这里将它们缩短以节省空间。没关系数据属性也不相关。如前所述，只需将SVG切换为DIV并添加 hello代替路径即可使它按预期工作。

Never mind the path values, I shortened them here to save space. It shouldn't matter. The data attributes aren't relevant either. As stated, just switching SVG for DIV and adding a "hello" instead of the paths makes it work as expected.

谢谢。

推荐答案

我知道这是一个老问题，但是当我自己在寻找该问题的答案时，我遇到了它。对我有用的解决方案是将 preserveAspectRatio = xMinYMin Meet 添加到标签。这实质上使SVG具有响应能力，并将内容移到SVG容器的左上方。

I know this is an old question, but I came across it as I was searching for an answer to this issue myself. The solution that worked for me was to add preserveAspectRatio="xMinYMin meet" to the tag. This essentially makes the SVG responsive and shifts the contents to the top left of the SVG container.

我在这里找到了答案： http://thenewcode.com/744/Make-SVG-Responsive

I found the answer here: http://thenewcode.com/744/Make-SVG-Responsive

这篇关于SVG位置：在IE 11中为绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！