fir*_*ast 4 html css svg google-chrome
这是我的部分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.这onmouseover是更改style属性的代码foreignObject.
$('#foo').css('display','block');
以下是css代码class tooltip:
.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中获得文本后备渲染
你的xhtml嵌入式是否在Chrome中没有display:none？
从我的测试中,如果删除requiredExtensions属性,您可以使上面的示例工作.显然这可能不是一个好主意,因为我的理解是该属性是为了确保用户代理可以正确呈现内容.但是,如果您的目标受众只是基于浏览器,那么您可以做出一个很好的假设,即UA将能够支持基本的XHTML.现在关于某些UA是否需要该属性来理解嵌入内容,这是一个不同的故事.
Firefox和Chrome都支持使用正确的命名空间是可行的,这个答案可能很有趣:
<foreignObject>里面的<textarea>处理Chrome中的预期,但不是Firefox
但是,它似乎foreignObjects仍然会引起网络问题,因此它可能只是浏览器供应商需要改进其支持.
到目前为止,我已经有了以下工作在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>
| 归档时间： |
|
| 查看次数： |
3158 次 |
| 最近记录： |