Html SVG外物与绝对定位

在

svg:foreignObject

中的html对象上使用绝对和相对定位时，我遇到了一个问题

我这样做是为了证明我的问题

div.wrapper

应该与

svg:g

中的

rect

位于同一位置，并且该div中的段落应该按照css中的描述进行定位

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

• Safari 6.0.3
• 铬26.0.1410.63
• Maxthon 4.0.3.6000

正如我在Firefox19.0.2中所期望的那样

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

更新

我发现，这可能是问题所在。for webkit上的

foreignObject

似乎有很多问题

---

如果有人能解决如何将段落放在div的角落里的问题，我将不胜感激。

这篇文章已经发布很久了，这个错误仍然存在

我实际上发现，如果在

foreignObject

元素中使用

x=“50”Y=“50”

属性，它在Chrome中的效果与预期一样

我知道这与转换不同，但至少你可以正确定位你的内容。

<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>

左上角
topright
middle
bottomleft
bottomright

---

position:fixed

如果我在SVG中指定

转换中的单位，即
translate（50px，50px）
，它对我有效。这只是将
g
移动到（0,0），因为
translate（50px，50px）
无效。请参见此处的第7.4节：解决方法可以是为foreignobject设置x=“50”和y=“50”。哇，这个bug已经有十年历史了：(