个人中心
文章发布
退出
作者热门文章
- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
32
4
给定:
<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
attin the "http://www.example.com" namespace with the value "val".The second rule will match only elements with the attribute
attregardless of the namespace of the attribute (including no namespace).The last two rules are equivalent and will match only elements with the attribute
attwhere 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/
32
4
0
我喜欢 smartcase，也喜欢 * 和 # 搜索命令。但我更希望 * 和 # 搜索命令区分大小写，而/和 ?搜索命令遵循 smartcase 启发式。 是否有隐藏在某个地方我还没有找到的设置？我宁
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题？ Update the question所以它是on-topic对于堆栈溢出。 10年前关闭。 Improve this qu
从以下网站，我找到了执行java AD身份验证的代码。 http://java2db.com/jndi-ldap-programming/solution-to-sslhandshakeexcepti
似乎 melt 会使用 id 列和堆叠的测量变量 reshape 您的数据框，然后通过转换让您执行聚合。 ddply，从 plyr 包看起来非常相似..你给它一个数据框，几个用于分组的列变量和一个聚合
我的问题是关于 memcached。 Facebook 使用 memcached 作为其结构化数据的缓存，以减少用户的延迟。他们在 Linux 上使用 UDP 优化了 memcached 的性能。 h
在 Camel route ，我正在使用 exec 组件通过 grep 进行 curl ，但使用 ${HOSTNAME} 的 grep 无法正常工作，下面是我的 Camel 路线。请在这方面寻求帮助。
我正在尝试执行相当复杂的查询，在其中我可以排除与特定条件集匹配的项目。这是一个 super 简化的模型来解释我的困境: class Thing(models.Model) user = mod
我正在尝试执行相当复杂的查询，我可以在其中排除符合特定条件集的项目。这里有一个 super 简化的模型来解释我的困境: class Thing(models.Model) user = mod
我发现了很多嵌入/内容项目的旧方法，并且我遵循了在这里找到的最新方法(我假设):https://blog.angular-university.io/angular-ng-content/ 我正在尝试
我正在寻找如何使用 fastify-nextjs 启动 fastify-cli 的建议 我曾尝试将代码简单地添加到建议的位置，但它不起作用。 'use strict' const path = req
我正在尝试将振幅 js 与 React 和 Gatsby 集成。做 gatsby developer 时一切看起来都不错，因为它发生在浏览器中，但是当我尝试 gatsby build 时，我收到以下错
我试图避免过度执行空值检查，但同时我想在需要使代码健壮的时候进行空值检查。但有时我觉得它开始变得如此防御，因为我没有实现 API。然后我避免了一些空检查，但是当我开始单元测试时，它开始总是等待运行时异
尝试进行包含一些 NOT 的 Kibana 搜索，但获得包含 NOT 的结果，因此猜测我的语法不正确: "chocolate" AND "milk" AND NOT "cow" AND NOT "tr
我正在使用开源代码共享包在 iOS 中进行 facebook 集成，但收到错误“FT_Load_Glyph failed: glyph 65535: error 6”。我在另一台 mac 机器上尝试了
我正在尝试估计一个标准的 tobit 模型，该模型被审查为零。 变量是 因变量 : 幸福 自变量 : 城市(芝加哥，纽约)， 性别(男，女)， 就业(0=失业，1=就业)， 工作类型(失业，蓝色，白色
我有一个像这样的项目布局 样本/ 一种/ 源/ 主要的/ java / java 资源/ .jpg 乙/ 源/ 主要的/ java / B.java 资源/ B.jpg 构建.gradle 设置.gr
如何循环遍历数组中的多个属性以及如何使用map函数将数组中的多个属性显示到网页 import React, { Component } from 'react'; import './App.css'
我有一个 JavaScript 函数，它进行 AJAX 调用以返回一些数据，该调用是在选择列表更改事件上触发的。 我尝试了多种方法来在等待时显示加载程序，因为它当前暂停了选择列表，从客户的 Angul
可能以前问过，但找不到。 我正在用以下形式写很多语句: if (bar.getFoo() != null) { this.foo = bar.getFoo(); } 我想到了三元运算符，但我认
我有一个表单，在将其发送到 PHP 之前我正在执行一些验证 JavaScript，验证后的 JavaScript 函数会发布用户在 中输入的文本。页面底部的标签；然而，此消息显示短暂，然后消失...
我是一名优秀的程序员,十分优秀！