SVG 位置：在 IE 11 中绝对

Question

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

.container{
    position: relative;
}

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

所以，问题是 svg 并没有在容器的 0:0 处结束，而是更像是在它以南的 200px 处。

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

该问题仅在 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 切换为 DIV 并添加“hello”而不是路径即可使其按预期工作。

谢谢。

Answer 1

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

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

Answer 2

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

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