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>

别介意路径值，我在这里缩短它们以节省空间。没关系。数据属性也不相关。如上所述，只需为DIV切换SVG并添加“hello”而不是路径使其按预期工作。

感谢。

Answer 1

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

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

Answer 2

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

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

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

2 个答案: