SVG foreignObject和绝对定位

Question

当我在svg:foreignObject中使用绝对和相对定位来处理HTML对象时，出现了问题。

我创建了这个jsfiddle来演示我的问题。

div.wrapper应该与svg:g中的rect处于同一位置，此

内的段落应按照css中所述进行定位。

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

• Safari 6.0.3
• Chrome 26.0.1410.63
• Maxthon 4.0.3.6000.

在Firefox 19.0.2中，它按照我的期望工作。

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

更新

我找到了这个bug，可能是问题所在。看起来在WebKit的问题跟踪器上有很多关于foreignObject的问题。

如果有人掌握了如何将段落定位在

的角落中的解决方法，请告诉我。

- swenedo

---

如果我在SVG的“transform”中指定单位，即“translate（50px，50px）”，它对我有效。 - Lars Kotthoff

这只是将 g 移动到 (0,0)，因为 translate(50px,50px) 是无效的。请参阅此处的第7.4节：SVG坐标系变换 - swenedo

解决方法可能是为foreignobject设置x="50"和y="50"。 <foreignObject width="200px" height="200px" x="50" y="50"> - Tobias Koller

哇，这个 bug 已经存在十年了 :( - Jay Wang

Answer 1

距离这篇文章发布已经有很长时间了，但是这个漏洞仍然存在。

实际上我发现，如果你在 foreignObject 元素中使用 x="50" Y="50" 属性，在Chrome浏览器中它可以按预期工作。

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

- Marcelo Coraça de Freitas

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>

position: fixed

- long