SVG foreignObject 的行为就像绝对定位在 Webkit 浏览器中一样答案

【问题标题】：SVG foreignObject behaves as though absolutely positioned in Webkit browsersSVG foreignObject 的行为就像绝对定位在 Webkit 浏览器中一样
【发布时间】：2012-01-01 10:03:37
【问题描述】：

我在 HTML 文档中使用 SVG。由于某种原因，在 Chrome 中，任何 <foreignObject> 元素中的任何内容都会出现在 <svg> 元素的父元素的左上角；好像<foreignObject> 元素是绝对定位的一样。我在 Firefox 中没有这个问题。

这可能是什么原因造成的？我该如何解决？

这是我的测试用例：(the example is also on JsFiddle)

<!DOCTYPE html>
<html>
<head>
<title>SVG bug in Chrome?</title>
<style type="text/css">
code {
    background: #FFFAEE;
}
pre code {
    display:block;
}
.widget-body {
    background:yellow;
    position: relative; /* This is the problem! */
}
</style>
<body>
<h1>SVG bug in Chrome?</h1>
<div>
    <p>
        The elemts in the &lt;foreignObject&gt; are not positioned properly unless the <code>.widget-body</code> rule is changed to:
                <pre><code>.widget-body {
    background:yellow;
/*  position: relative; /* This is the problem! */
    position: static;
}</code></pre>
    </p>
        <h2>The Example:</h2>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="800">
    <g>
    <g transform="scale(1) translate(100, 200)" style="cursor: move;"><foreignobject pointer-events="fill" width="300" height="350">
    <body xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px; height: 100%;">
    <table style="border-collapse: collapse; font-size: 11px; color: rgb(119, 68, 0); font-family: Arial,Helvetica; font-weight: normal; border-style: none;">
    <tbody>
    <tr>
        <td style="text-align: center; vertical-align: middle; white-space: nowrap;">
            <div style="width:300px;height:350px;position:static;">
                <div class="widget" style="width: 300px;">
                    <div style="-moz-user-select: none;">
                        <span>My Widget Title</span>
                    </div>
                    <div>
                        <div class="widget-body" style="width: 298px; height: 323px;">
                            <div style="width: 298px; height: 323px;">
                                <div style="width: 298px; height: 323px;">
                                    This position of this yellow square <br />should approximately (100, 200)
                                    <div style="position:absolute;bottom:0;right:0;background:red;color:white;font-weight:bold;">
                                        This red square <br />should be <br />in the bottom right corner <br />of the yellow square.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    </tbody>
    </table>
    </body>
    </foreignobject></g>
    </g>
    </svg>
</div>
</body>
</html>

我希望看到的（我在 FireFox 中看到的）是这样的：

我在 Chrome（Fedora 和 Android 平板电脑上的 15.0.874.121）中得到的是：

我对 HTML 内容的控制很少，因为我同时使用 JavaScript 框架来支持丰富的应用程序和预先存在的小部件。

【问题讨论】：

Chrome 中的错误？你能在你的问题中添加一个简单的测试用例吗？
哇！我真的问过这个问题？完全忘记了！ @robertc - 我会尝试创建一个测试用例。
@robertc - 添加了一个示例/测试用例。
对我来说很好。但我有dev 版的chrome。 17.0.942.0 dev-m你用的是什么版本？可能是您的版本中的这个错误？
@antyrat - 版本 15.0.874.121。对我来说听起来是个好消息；未来版本的 Chrome 可能不会有这个问题！ :D

标签： html css google-chrome webkit svg

【解决方案1】：

此问题并非特定于 Chrome，因为我可以在 Macintosh 的 Chrome 15.0.874.121 和 Safari 5.1.2 中重现它。（它也发生在旧版本的 Firefox for Mac 中，例如版本 3.6.8，但在当前版本中行为是正确的。）This currently outstanding Webkit bug 可能是问题的原因。全局坐标被错误地用于 foreignObject 内的元素，这意味着当使用绝对定位时，这些元素相对于主文档流而不是 foreignObject 容器放置，因此 SVG 转换不适用于这些元素。

我无法找到此问题的通用解决方案。

对于这个特定示例，这将修复所有上述浏览器中的布局：

.widget {
    position: relative;
    left: 100px;
    top: 200px;
}

Demonstration on jsfiddle.

【讨论】：

这些问题实际上是我所关注的。老实说，我什至没有意识到红色盒子是不同的形状！ :P 我的问题是黄色框不应该向上移动并且不应该与左边距齐平。至于表头，其实没有这个规则就在对的地方；添加此规则（就像我的 .widget-body { position: relative; } 如何破坏黄色框的行为一样）会导致标题产生相同的错误行为。
（找到完整的解决方案后，我删除了将标题与框的其余部分重新组合的示例。它略微破坏了评论历史记录，但比保留所有编辑更清晰可见。）
进一步修订......很确定这一点。 :)
这肯定会得到预期的结果......但我有几个小部件遇到了这个问题。我必须让<g> 元素的翻译与所有这些小部件上的 CSS 属性保持同步。
问题是您对 translate(100, 200) 整体和 position:absolute 对红色元素的不兼容使用。 position:absolute 将该元素及其相对于其定位的父元素从正常流中取出，因此它们没有应用平移。真的有必要绝对定位这个元素吗？

【解决方案2】：

position: fixed; 为我解决了这个问题。

【讨论】：

已修复但导致了一个新问题：z-index
Duncan Babbage 的解决方案仍然不适合我，但奇怪的是这确实有效，并且没有像我预期的那样提升到角落！但是，与@AiShiguang 一致，它确实会在 Chrome 中导致 z-index 问题 - 尽管它在 FireFox 中仍然可以正常工作，没有 z-index 问题。
这也为我解决了问题
这会固定位置，但不会缩放。在第一次错误报告之后的 11 年......