- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
这是我的部分 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
似乎仍然会在网络上引起问题,所以可能只是浏览器供应商需要改进他们的支持。
到目前为止,我已经在 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/
我的Angular-Component位于一个flexbox(id =“log”)中。可以显示或隐藏flexbox。 我的组件内部有一个可滚动区域,用于显示日志消息。 (id =“message-li
我真的很困惑 有一个 phpinfo() 输出: MySQL 支持 启用 客户端 API 版本 5.5.40 MYSQL_MODULE_TYPE 外部 phpMyAdmin 显示: 服务器类型:Mar
我正在研究这个 fiddle : http://jsfiddle.net/cED6c/7/我想让按钮文本在单击时发生变化,我尝试使用以下代码: 但是,它不起作用。我应该如何实现这个?任何帮助都会很棒
我应该在“dogs_cats”中保存表“dogs”和“cats”各自的ID,当看到数据时显示狗和猫的名字。 我有这三个表: CREATE TABLE IF NOT EXISTS cats ( id
我有一个字符串返回到我的 View 之一,如下所示: $text = 'Lorem ipsum dolor ' 我正在尝试用 Blade 显示它: {{$text}} 但是,输出是原始字符串而不是渲染
我无法让我的链接(由图像表示,位于页面左侧)真正有效地显示一个 div(包含一个句子,位于中间)/单击链接时隐藏。 这是我的代码: Practice
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
最初我使用 Listview 来显示 oracle 结果,但是最近我不得不切换到 datagridview 来处理比 Listview 允许的更多的结果。然而,自从切换到数据网格后,我得到的结果越来越
我一直在尝试插入一个 Unicode 字符 ∇ 或 ▽,所以它显示在 Apache FOP 生成的 PDF 中。 这是我到目前为止所做的: 根据这个基本帮助 Apache XSL-FO Input,您
我正在使用 node v0.12.7 编写一个 nodeJS 应用程序。 我正在使用 pm2 v0.14.7 运行我的 nodejs 应用程序。 我的应用程序似乎有内存泄漏,因为它从我启动时的大约 1
好的,所以我有一些 jQuery 代码,如果从下拉菜单中选择了带有前缀 Blue 的项目,它会显示一个输入框。 代码: $(function() { $('#text1').hide();
当我试图检查 Chrome 中的 html 元素时,它显示的是 LESS 文件,而 Firefox 显示的是 CSS 文件。 (我正在使用 Bootstrap 框架) 如何在 Chrome 中查看 c
我是 Microsoft Bot Framework 的新手,我正在通过 youtube 视频 https://youtu.be/ynG6Muox81o 学习它并在 Ubuntu 上使用 python
我正在尝试转换从 mssql 生成的文件到 utf-8。当我打开他的输出 mssql在 Windows Server 2003 中使用 notepad++ 将文件识别为 UCS-2LE我使用 file
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我正在尝试执行单击以打开/关闭一个 div 的功能。 这是基本的,但是,点击只显示 div,当我点击“关闭”时,没有任何反应。 $(".inscricao-email").click(function
假设我有 2 张卡片,屏幕上一次显示一张。我有一个按钮可以用其他卡片替换当前卡片。现在假设卡 1 上有一些数据,卡 2 上有一些数据,我不想破坏它们每个上的数据,或者我不想再次重建它们中的任何一个。
我正在使用 Eloquent Javascript 学习 Javascript。 我在 Firefox 控制台上编写了以下代码,但它返回:“ReferenceError:show() 未定义”为什么?
我正在使用 Symfony2 开发一个 web 项目,我使用 Sonata Admin 作为管理面板,一切正常,但我想要做的是,在 Sonata Admin 的仪表板菜单上,我需要显示隐藏一些菜单取决
我试图显示一个div,具体取决于从下拉列表中选择的内容。例如,如果用户从列表中选择“现金”显示现金div或用户从列表中选择“检查”显示现金div 我整理了样本,但样本不完整,需要接线 http://j
我是一名优秀的程序员,十分优秀!