Question

我在svg:foreignObject内的html对象上使用绝对和相对定位时遇到问题。

我已将此jsfiddle用来证明我的问题。

div.wrapper应与rect中的svg:g位于同一位置，此div中的段落应按照css中的描述进行定位。

我在以下浏览器中遇到问题（Mac）：

Safari 6.0.3
Chrome 26.0.1410.63
Maxthon 4.0.3.6000。

它可以像我在Firefox 19.0.2中所期望的那样工作。

我的代码有问题吗？有谁知道如何解决这个问题？

更新

我找到this bug，这可能是问题所在。对于webkit，issue tracker上的foreignObject似乎存在很多问题。

如果某人有解决方法如何将段落放在div的角落，我将不胜感激。

Answer 1

自这篇文章以来很长一段时间以及bug仍然存在。

我实际上发现，如果您在x="50" Y="50"元素中使用foreignObject属性，则它会在Chrome中按预期工作。

我知道它与transform不一样，但至少你可以正确定位你的内容。

Answer 2

<foreignObject width="200px" height="200px">
    <div xmlns="http://www.w3.org/1999/xhtml" class="wrapper" style="position: fixed">
        <p id="topleft">topleft</p>
        <p id="topright">topright</p>
        <p id="middle">middle</p>
        <p id="bottomleft">bottomleft</p>
        <p id="bottomright">bottomright</p>
    </div>
   </foreignObject>

位置：固定

SVG foreignObject和绝对定位

2 个答案: