SVG 位置：在 IE 11 中绝对答案

【问题标题】：SVG position:absolute in IE 11SVG 位置：在 IE 11 中绝对
【发布时间】：2016-11-17 22:07:42
【问题描述】：

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

.container{
    position: relative;
}

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

所以，问题在于 svg 并没有出现在容器的 0:0 中，而更像是在容器以南 200 像素处。

奇怪的是，如果我将 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”而不是路径即可使其按预期工作。

谢谢。

【问题讨论】：

当我尝试将此代码放在小提琴中时，我没有得到任何结果。您能否提供一个有效的 sn-p 来说明您的问题？

标签： html css svg position css-position

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：