当使用foreignObject标记在html中嵌入html时，基于webkit的浏览器会在svg元素后面呈现嵌入的html元素的背景。见http://code.google.com/p/chromium/issues/detail?id=35545。
以下是一个示例：http://www.mxgraph.com/demo/markup/webkitbg.html 绿色div应位于红色顶部。
是否有人知道此问题的解决方法？也许在svg中使用z-index和/或元素或某些东西的一些咒语来欺骗webkit做正确的事情？
答案 0 :(得分：3)
这是在2011-11-10修复的webkit错误58417。该修复程序位于Chromium版本17，该版本目前处于2012-01-09的测试阶段，应该会在2月初发布。不确定修复程序什么时候会登陆Safari，但幸运的是我不需要支持它。
所以解决方法似乎是“等一个月”......
答案 1 :(得分：0)
我刚遇到同样的问题。即使这个bug在Chrome中很长一段时间都已修复，但Safari似乎已经落后于代码库。
我的解决方案是将style="display:inline-block"添加到foreignObject代码的第一个孩子。这似乎解决了这个问题。