Question

我正在使用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中看到的）是：

The behavior of my example in FireFox

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

The behavior of my example in Chrome. The contents of the foreignObject are not in the right place.

我对HTML内容的控制很少，因为我使用的是富有应用程序的JavaScript框架和预先存在的小部件。

Answer 1

此问题并非特定于Chrome，因为我可以在Chrome 15.0.874.121 for Macintosh以及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.

Answer 2

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

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

2 个答案: