SVG位置：IE 11中的绝对位置

Question

我有一个放置在容器中的SVG对象。 它的类上有以下CSS。

.container{
    position: relative;
}

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

所以，问题是svg不会以容器的0：0结束，而更像是在200px以南。

奇怪的是，如果我为具有相同类的DIV替换SVG标签，它会准确显示我想要的位置。

问题只在IE中显而易见（仅尝试了11，但在早期版本中也可能存在）。 嗯，这个问题在Minori中也很明显。 适用于Safari，Chrome，FF，Opera，以及除IE以外的大人物。

任何想法都是最受欢迎的。

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 for DIV并添加“hello”而不是路径使其按预期工作。

谢谢。

Answer 1

感谢你回答这个ceindeg ，即使事实之后。

对于遇到此问题的任何其他人来说，比preserveAspectRatio属性更好的解决方案就是确保在主SVG标记内设置width和height 。 大多数浏览器不需要它们，但IE是不同的（当然）。

Answer 2

我知道这是一个老问题，但是当我在寻找这个问题的答案时，我遇到了它。 对我preserveAspectRatio="xMinYMin meet"的解决方案是在标签中添加preserveAspectRatio="xMinYMin meet" 。 这实质上使SVG响应并将内容移动到SVG容器的左上角。

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