关于html：SVG foreignObject的行为似乎完全位于Webkit浏览器中


SVG foreignObject behaves as though absolutely positioned in Webkit browsers

我正在HTML文档中使用SVG。出于某些原因，在Chrome中，任何元素中的任何内容都显示在元素的父元素的左上角；好像元素是绝对定位的。我在Firefox中没有这个问题。

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

这是我的测试用例：(示例也在JsFiddle上)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
SVG bug in Chrome?
<style type="text/css">
code {
    background: #FFFAEE;
}
pre code {
    display:block;
}
.widget-body {
    background:yellow;
    position: relative; /* This is the problem! */
}
</style>
<body>
SVG bug in Chrome?

    <p><center>[wp_ad_camp_2]</center></p><p>

        The elemts in the <foreignObject> are not positioned properly unless the <wyn>.widget-body</wyn> rule is changed to:
                [cc lang="css"].widget-body {
    background:yellow;
/*  position: relative; /* This is the problem! */
    position: static;
}

这个例子：


<外国对象指针事件=" fill" width =" 300" height =" 350">

<身体>

我的窗口小部件标题

这个黄色正方形的位置
应该大约(100，200)

这个红色方块
应该在黄色方块的右下角
。










我期望看到的(这是我在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框架用于丰富的应用程序和预先存在的小部件。

相关讨论

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

我无法找到此问题的一般解决方案。

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

1
2
3
4
5
.widget {
    position: relative;
    left: 100px;
    top: 200px;
}

jsfiddle上的演示。

相关讨论

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

相关讨论