这是我的部分 html/svg 代码
<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" style="display: none;" id="foo" height="700" width="370" y="0" x="0">
<span xmlns="http://www.w3.org/1999/xhtml" class="tooltip">
<div><b>Comments</b></div>
</span>
</foreignObject>
我想做的是显示 foreignObject onmouseover。下面是更改 foreignObject 的 style 属性的 onmouseover 代码。
$('#foo').css('display','block');
下面是类工具提示的css代码:
.tooltip {
display: block;
position: absolute;
width: 350px;
padding: 5px;
font-size: 11px;
text-align: left;
color: rgb(0, 0, 0);
background: rgb(204, 204, 204);
border: 2px solid rgb(153, 153, 153);
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px;
margin-top: 1px;
top: 0%;
left: 0%;
z-index: 1000;
word-wrap: break-word;
}
整个代码在 firefox 中完美运行，但在 chrome 中似乎不起作用。我正在使用 Ubuntu 12.04 Chrome 版本 20.0.1132.57。 mouseover 按预期将 foreignObject 的显示从 display: none; 更改为 display:block; 但文本没有出现。
编辑
http://jsfiddle.net/firecast/wNB8G/
这是我的确切问题的示例...在 Firefox 上运行良好，但在 chrome 上不起作用。
最佳答案
从我在 Mac OS X 上的测试看来，Chrome 不支持 foreignObjects 至少不支持您所需的扩展。我试过你的来源，也从 mdn 中获取了这个例子:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
<svg width="400px" height="300px" viewBox="0 0 400 300"
xmlns="http://www.w3.org/2000/svg">
<desc>This example uses the 'switch' element to provide a
fallback graphical representation of a paragraph, if
XHTML is not supported.</desc>
<!-- The 'switch' element will process the first child element
whose testing attributes evaluate to true.-->
<switch>
<!-- Process the embedded XHTML if the requiredExtensions attribute
evaluates to true (i.e., the user agent supports XHTML
embedded within SVG). -->
<foreignObject width="100" height="50"
requiredExtensions="http://www.w3.org/1999/xhtml">
<!-- XHTML content goes here -->
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
</foreignObject>
<!-- Else, process the following alternate SVG.
Note that there are no testing attributes on the 'text' element.
If no testing attributes are provided, it is as if there
were testing attributes and they evaluated to true.-->
<text font-size="10" font-family="Verdana">
<tspan x="10" y="10">Here is a paragraph that</tspan>
<tspan x="10" y="20">requires word wrap!</tspan>
</text>
</switch>
</svg>
现在 MDN 示例有一些不适用于 Chrome 的东西是可行的，但对我来说，我只能在 Chrome 版本 28.0.1500.71 中获得文本回退渲染
如果没有 display:none，您的 xhtml 嵌入是否可以在 Chrome 中工作？
更新
根据我的测试，如果您删除 requiredExtensions 属性，您可以使上述示例正常工作。显然这可能不是一个好主意，因为我的理解是该属性用于确保用户代理可以正确呈现内容。然而，如果您的目标受众只是基于浏览器，您可以做出一个很好的假设，即 UA 将能够支持基本的 XHTML。现在至于某些 UA 是否需要该属性来理解嵌入内容，那就是另一回事了。
Firefox 和 Chrome 都支持使用正确的命名空间是可行的，这个答案可能很有趣:
<textarea> inside <foreignObject> handles as expected in Chrome but not Firefox
但是，foreignObjects 似乎仍然会在网络上引起问题，所以可能只是浏览器供应商需要改进他们的支持。
更新 x2
到目前为止，我已经在 Firefox 和 Chrome 中使用了以下内容，现在看来，这个 foreignObject 很奇怪 ;)
<!DOCTYPE html>
<html>
<style>
svg {
position: relative;
}
.tooltip {
display: none;
position: absolute;
left: 0;
top: 0;
width: 350px;
padding: 5px;
font-size: 11px;
text-align: left;
color: rgb(0, 0, 0);
background: rgb(204, 204, 204);
border: 2px solid rgb(153, 153, 153);
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px;
}
svg:hover .tooltip {
display: block;
}
</style>
<body>
<svg width="400px" height="300px" viewBox="0 0 400 300"
xmlns="http://www.w3.org/2000/svg">
<foreignObject id="foo" height="700" width="370" y="0" x="0">
<span xmlns="http://www.w3.org/1999/xhtml" class="tooltip">
<div><b>Comments</b></div>
</span>
</foreignObject>
</svg>
</body>
</html>
关于html - foreignObject 显示 :block not working in chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17693278/