html – SVG foreignObject的行为就像在Webkit浏览器中绝对定位
发布时间:2020-12-14 21:33:38 所属栏目:资源 来源:网络整理
导读:我正在使用SVG在一个HTML文档。由于某些原因在Chrome中,任何 foreignObject元素出现在 svg的左上角。元素的父元素好像 foreignObject元素绝对定位或某物。我在Firefox中没有这个问题。 可能是什么原因造成的?我该怎么解决? 这是我的测试用例:(the exampl
我正在使用SVG在一个HTML文档。由于某些原因在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 <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框架是丰富的应用程序和预先存在的小部件。 解决方法
这个问题不是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. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |