SVG foreignObject和绝对定位

我有绝对和相对定位的问题时，我用它在svg:foreignObject内的HTML对象。SVG foreignObject和绝对定位

我有此jsfiddle来证明我的问题。

div.wrapper应与svg:g中的rect位于相同的位置，并且该div内的段落应该按照css中的描述进行定位。

我有以下浏览器（Mac）中的问题：

它的工作原理，因为我希望在Firefox 19.0.2。

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

UPDATE

我发现this bug，这可能是问题。它看起来好像foreignObject有很多关于webkit的issue tracker的问题。

如果有人对如何在div的角落段落定位一个解决方法我将不胜感激。

2013-04-16 swenedo

如果我在SVG中的'transform'中指定了单位，即'translate（50px，50px）'，它对我有用。 –

因为'translate（50px，50px）'是无效的，所以它只是将'g'移动到（0,0）。请参阅此处的第7.4节：[SVG坐标系转换]（http://www.w3.org/TR/SVG/coords.html） – swenedo

解决方法可以将x =“50”和y =“50”设置为异物。 –

长时间以来，这篇文章和错误仍然存在。

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

我知道这是不一样的transform，但至少你可以正确放置您的内容。

2016-02-23 06:01:31

回答