Webkit SVGforeignObject 背景分层错误的解决方法？
当使用foreignObject标签在SVG中嵌入html时，基于webkit的浏览器会渲染svg元素后面嵌入的html元素的背景。请参阅 http://code.google.com/p/chromium/issues/详细信息？id=35545 。
这是一个示例： http://www.mxgraph.com/demo/markup/webkitbg.html 绿色 div 应该位于红色上面。
有谁知道这个问题的解决方法？也许 z-index 和/或元素分组或 svg 中的某些内容可以欺骗 webkit 做正确的事情？
When embedding html inside of SVG using the foreignObject tag, webkit based browsers render the backgrounds of the embedded html elements behind the svg elements. See http://code.google.com/p/chromium/issues/detail?id=35545 .
Here's an example : http://www.mxgraph.com/demo/markup/webkitbg.html
The green div should be on top of the red.
Does anyone know of a workaround for this issue? Maybe some incantation of z-index and/or grouping of elements or something in svg to fool webkit into doing the right thing?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是 webkit 错误 58417，已于 2011 年 11 月 10 日修复。该修复已在 Chromium 版本 17 中进行，该版本目前于 2012 年 1 月 9 日处于测试阶段，预计将于 2 月初发布。不确定修复何时会登陆 Safari，但幸运的是我不需要支持它。
所以解决方法似乎是“等待一个月”......
This is webkit bug 58417, fixed on 2011-11-10. The fix is in Chromium version 17, which is currently in beta as of 2012-01-09, and should be released in early February. Not sure when the fix will land in Safari, but luckily I don't need to support it.
So the workaround seems to be "wait a month"...
我刚刚遇到了同样的问题。尽管这个 bug 在 Chrome 中已经修复了很长时间，但 Safari 的代码库似乎落后了很多年。
我的解决方案是将
style="display:inline-block"添加到foreignObject标记的第一个子级。这似乎可以解决问题。I've just been hit by the same issue. Even though the bug is fixed since a long time in Chrome, Safari seems to be ages behind with the codebase.
My solution is to add
style="display:inline-block"to the first child of theforeignObjecttag. This seems to fix the problem.