SVG foreignObject 和绝对定位答案

【问题标题】：SVG foreignObject and absolute positioningSVG foreignObject 和绝对定位
【发布时间】：2019-12-19 16:37:50
【问题描述】：

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

我制作了这个jsfiddle 来证明我的问题。

div.wrapper 应与svg:g 中的rect 位于同一位置，并且此 div 内的段落应按照 css 中的说明进行定位。

我在以下浏览器 (Mac) 中遇到问题：

Safari 6.0.3
Chrome 26.0.1410.63
傲游4.0.3.6000。

它在 Firefox 19.0.2 中可以正常工作。

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

更新

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

如果有人知道如何将段落放置在 div 的角落，我将不胜感激。

【问题讨论】：

如果我在 SVG 的 transform 中指定单位，它对我有用，即 translate(50px,50px)。
这只是将g 移动到（0,0），因为translate(50px,50px) 无效。请参阅此处的第 7.4 节：SVG Coordinate system transformations
解决方法可能是为外部对象设置 x="50" 和 y="50"。
哇，这个 bug 已经有十年历史了 :(

标签： html css svg

【解决方案1】：

自从这篇文章和错误持续很久以来。

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

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

【讨论】：

【解决方案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>

位置：固定

【讨论】：