SVG foreignObject的行为像在Webkit浏览器中绝对定位 [英] SVG foreignObject behaves as though absolutely positioned in Webkit browsers
问题描述
我在HTML文档中使用SVG。由于某些原因，Chrome中的任何< foreignObject> 元素中的任何内容都会显示在< svg> 元素的父元素;就像< foreignObject> 元素绝对定位或某事。我在Firefox中没有这个问题。
这可能是什么原因？
这是我的测试用例：（可能是问题的原因。全局坐标不正确地用于foreignObject中的元素，这意味着当使用绝对定位时，这些元素相对于主文档流而不是foreignObject容器放置，因此SVG翻译不应用于这些元素。
我找不到这个问题的一般解决方案。
对于这个特定的例子，这将修复布局在所有上述浏览器中：
.widget {
position：relative;
left：100px;
top：200px;
}
I'm working with SVG in an HTML document. For some reason in Chrome, any content in any <foreignObject> element appears in the top left corner of the <svg> element's parent element; as though the <foreignObject> element was absolutely positioned or something. I don't have this problem in Firefox.
What could be causing this? How can I fix it?
Here is my test case: (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 <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>
What I expect to see (which is what I see in FireFox) is this:
What I get in Chrome (15.0.874.121 on Fedora and on an Android Tablet) is this:
I have minimal control over my HTML content as I am using both a JavaScript Framework for rich apps and pre-existing widgets.
This issue is not specific to Chrome as I could reproduce it in Chrome 15.0.874.121 for Macintosh as well as Safari 5.1.2. (It also occurred in older versions of Firefox for Mac, such as version 3.6.8, but the behavior is correct in the current version.) This currently outstanding Webkit bug is likely to be the cause of the issue. Global coordinates are incorrectly used for elements inside the foreignObject which means when absolute positioning is used, those elements are placed relative to the main document flow rather than the foreignObject container, and thus the SVG translate is not applied to those elements.
I have not been able to locate a general solution to this issue.
For this specific example, this will fix the layout in all of the above-mentioned browsers:
.widget {
position: relative;
left: 100px;
top: 200px;
}
这篇关于SVG foreignObject的行为像在Webkit浏览器中绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
