- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
给定:
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="url"></a>
</svg>
</body>
是否可以使用 HTML DOM 的 .querySelector()
或 .querySelectorAll()
通过其 xlink 的内容选择 SVG 内的链接:href
属性?
这个有效:
document.querySelector('a') // <a xlink:href="url"/>
这些不会:
document.querySelector('[href="url"]') // null
document.querySelector('[xlink:href="url"]') // Error: not a valid selector
document.querySelector('[xlink\:href="url"]') // Error: not a valid selector
document.querySelector('[xlink\\:href="url"]') // null
有没有一种方法可以编写该属性选择器以使其“看到”xlink:href
?
最佳答案
查询选择器可以处理 namespace ,但它变得很棘手,因为
在 CSS 选择器中指定命名空间的语法与 html 不同;
querySelector API 没有任何方法可以将命名空间前缀(如 xlink
)分配给实际的命名空间(如 "http://www.w3.org/1999/xlink"
).
关于第一点,the relevant part of the CSS specs允许您指定无 命名空间(默认)、特定命名空间或任何 命名空间:
@namespace foo "http://www.example.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }The first rule will match only elements with the attribute
att
in the "http://www.example.com" namespace with the value "val".The second rule will match only elements with the attribute
att
regardless of the namespace of the attribute (including no namespace).The last two rules are equivalent and will match only elements with the attribute
att
where the attribute is not in a namespace.
查看此 fiddle ,注意填充样式(默认、悬停和事件):
https://jsfiddle.net/eg43L/
Selectors API 采用 CSS 选择器语法,但没有等效于 @namespace
规则来定义命名空间。结果,selectors with namespaces are not valid but the wildcard namespace token is valid :
If the group of selectors include namespace prefixes that need to be resolved, the implementation must raise a SYNTAX_ERR exception ([DOM-LEVEL-3-CORE], section 1.4).
This specification does not provide support for resolving arbitrary namespace prefixes. However, support for a namespace prefix resolution mechanism may be considered for inclusion in a future version of this specification.
A namespace prefix needs to be resolved if the namespace component is neither empty (e.g.
|div
), representing the null namespace, or an asterisk (e.g.*|div
), representing any namespace. Since the asterisk or empty namespace prefix do not need to be resolved, implementations that support the namespace syntax in Selectors must support these.
(加粗)
查看 the fiddle再次,这次要注意控制台输出。命令 document.querySelector('[*|href="#url"]')
返回您想要的元素。
最后一个警告:MDN告诉我 IE8- 不支持 CSS 命名空间,所以这可能对他们不起作用。
2015-01-31 更新:
正如@Netsi1964 在评论中指出的那样,这不适用于 HTML 5 文档中的自定义命名空间属性,因为 HTML 不支持 XML 命名空间。 (它适用于独立的 SVG 或其他 XML 文档,包括 XHTML。)
当 HTML5 解析器遇到类似 data:myAttribute="value"
的属性时,它会将其视为属性名称的单个字符串,包括 :
。为了让事情变得更加困惑,它会自动将字符串小写。
要让 querySelector
选择这些属性,您必须将 data:
作为属性字符串的一部分。但是,由于 :
在 CSS 选择器中有特殊含义,您需要使用 \
字符将其转义。由于您需要 \
作为选择器的一部分通过,因此您需要在 JavaScript 中转义它。
因此,成功的调用如下所示:
document.querySelector('[data\\:myattribute="value"]');
为了使事情更合乎逻辑,我建议您对属性名称使用全部小写,因为 HTML 5 解析器无论如何都会转换它们。 Blink/Webkit 浏览器将自动小写您传递给 querySelector
的选择器,但这实际上是一个非常有问题的错误(意味着您永远无法选择具有混合大小写标签名称的 SVG 元素)。
但同样的解决方案是否适用于 xlink:href
?不! HTML 5 解析器识别 SVG 标记中的 xlink:href
,并将其正确解析为命名空间属性。
Here's the updated fiddle with additional tests .再次查看控制台输出以查看结果。在 Chrome 40、Firefox 35 和 IE 11 中测试;行为上的唯一区别是 Chrome 匹配混合大小写选择器。
关于javascript - 是否可以使用 HTML 的 .querySelector() 通过 SVG 中的 xlink 属性进行选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23034283/
我想做的是让 JTextPane 在 JPanel 中占用尽可能多的空间。对于我使用的 UpdateInfoPanel: public class UpdateInfoPanel extends JP
我在 JPanel 中有一个 JTextArea,我想将其与 JScrollPane 一起使用。我正在使用 GridBagLayout。当我运行它时,框架似乎为 JScrollPane 腾出了空间,但
我想在 xcode 中实现以下功能。 我有一个 View Controller 。在这个 UIViewController 中,我有一个 UITabBar。它们下面是一个 UIView。将 UITab
有谁知道Firebird 2.5有没有类似于SQL中“STUFF”函数的功能? 我有一个包含父用户记录的表,另一个表包含与父相关的子用户记录。我希望能够提取用户拥有的“ROLES”的逗号分隔字符串,而
我想使用 JSON 作为 mirth channel 的输入和输出,例如详细信息保存在数据库中或创建 HL7 消息。 简而言之,输入为 JSON 解析它并输出为任何格式。 最佳答案 var objec
通常我会使用 R 并执行 merge.by,但这个文件似乎太大了,部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上,插补似乎删除了 snp ID 的 rs 数字,我只剩
我有一个以前可能被问过的问题,但我很难找到正确的描述。我希望有人能帮助我。 在下面的代码中,我设置了varprice,我想添加javascript变量accu_id以通过rails在我的数据库中查找记
我有一个简单的 SVG 文件,在 Firefox 中可以正常查看 - 它的一些包装文本使用 foreignObject 包含一些 HTML - 文本包装在 div 中:
所以我正在为学校编写一个 Ruby 程序,如果某个值是 1 或 3,则将 bool 值更改为 true,如果是 0 或 2,则更改为 false。由于我有 Java 背景,所以我认为这段代码应该有效:
我做了什么: 我在这些账户之间创建了 VPC 对等连接 互联网网关也连接到每个 VPC 还配置了路由表(以允许来自双方的流量) 情况1: 当这两个 VPC 在同一个账户中时,我成功测试了从另一个 La
我有一个名为 contacts 的表: user_id contact_id 10294 10295 10294 10293 10293 10294 102
我正在使用 Magento 中的新模板。为避免重复代码,我想为每个产品预览使用相同的子模板。 特别是我做了这样一个展示: $products = Mage::getModel('catalog/pro
“for”是否总是检查协议(protocol)中定义的每个函数中第一个参数的类型? 编辑(改写): 当协议(protocol)方法只有一个参数时,根据该单个参数的类型(直接或任意)找到实现。当协议(p
我想从我的 PHP 代码中调用 JavaScript 函数。我通过使用以下方法实现了这一点: echo ' drawChart($id); '; 这工作正常,但我想从我的 PHP 代码中获取数据,我使
这个问题已经有答案了: Event binding on dynamically created elements? (23 个回答) 已关闭 5 年前。 我有一个动态表单,我想在其中附加一些其他 h
我正在尝试找到一种解决方案,以在 componentDidMount 中的映射项上使用 setState。 我正在使用 GraphQL连同 Gatsby返回许多 data 项目,但要求在特定的 pat
我在 ScrollView 中有一个 View 。只要用户按住该 View ,我想每 80 毫秒调用一次方法。这是我已经实现的: final Runnable vibrate = new Runnab
我用 jni 开发了一个 android 应用程序。我在 GetStringUTFChars 的 dvmDecodeIndirectRef 中得到了一个 dvmabort。我只中止了一次。 为什么会这
当我到达我的 Activity 时,我调用 FragmentPagerAdapter 来处理我的不同选项卡。在我的一个选项卡中,我想显示一个 RecyclerView,但他从未出现过,有了断点,我看到
当我按下 Activity 中的按钮时,会弹出一个 DialogFragment。在对话框 fragment 中,有一个看起来像普通 ListView 的 RecyclerView。 我想要的行为是当
我是一名优秀的程序员,十分优秀!