SVG foreignObject的行为就像在Webkit浏览器中绝对定位一样
Ric*_*uen 18 html css svg webkit google-chrome
我在一个HTML文档中使用SVG.出于某些原因,在Chrome中,任何<foreignObject>元素中的任何内容都会显示在<svg>元素的父元素的左上角; 好像<foreignObject>元素绝对定位或什么的.我在Firefox中没有这个问题.
可能是什么导致了这个？我该如何解决？
这是我的测试用例:( 示例也在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 <foreignObject> 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框架和预先存在的小部件.
Dun*_*age 21
此问题并非特定于Chrome,因为我可以在Chrome 15.0.874.121 for Macintosh以及Safari 5.1.2中重现它.(它也出现在旧版本的Firefox for Mac中,例如版本3.6.8,但在当前版本中行为是正确的.)这个当前未解决的Webkit错误很可能是问题的原因.全局坐标被错误地用于foreignObject内的元素,这意味着当使用绝对定位时,这些元素相对于主文档流而不是foreignObject容器放置,因此SVG转换不应用于这些元素.
我无法找到这个问题的一般解决方案.
对于此特定示例,这将修复所有上述浏览器中的布局:
.widget {
position: relative;
left: 100px;
top: 200px;
}