是否可以使用HTML的.querySelector（）来通过SVG中的xlink属性进行选择？ [英] Is it possible to use HTML's .querySelector() to select by xlink attribute in an SVG?
问题描述
给定：
<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：href 的内容选择SVG内的链接属性？
Is it possible to use the HTML DOM's .querySelector() or .querySelectorAll() to select the link inside the SVG by the contents of its xlink:href attribute?
这样做：
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
有没有办法写入属性选择器它看到'code> xlink：href ？
Is there a way of writing that attribute selector to make it 'see' the xlink:href?
推荐答案
查询选择器可以处理命名空间，但是它变得棘手，因为
Query selector can handle namespaces, but it gets tricky because
-
在CSS选择器中指定命名空间的语法是不同的from html;
The syntax for specifying namespaces in CSS selectors is different from html;
querySelector API没有任何分配命名空间前缀的方法（如 xlink ）到实际的命名空间（如http://www.w3.org/1999/xlink）。
The querySelector API doesn't have any method for assigning a namespace prefix (like xlink) to an actual namespace (like "http://www.w3.org/1999/xlink").
第一点， CSS规范的相关部分允许您指定 no 命名空间（默认），特定命名空间或任何命名空间：
On the first point, the relevant part of the CSS specs allows you to specify no namespace (the default), a specific namespace, or any namespace:
@namespace foo "http://www.example.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }
第一条规则只匹配属性在 http://www.example.com 命名空间中的att 具有值val。
The first rule will match only elements with the attribute att in the "http://www.example.com" namespace with the value "val".
第二条规则将只匹配属性 att 的元素，而不管属性的命名空间如何（包括没有命名空间）。
The second rule will match only elements with the attribute att regardless of the namespace of the attribute (including no namespace).
最后两条规则是等价的，只能与属性 att 的元素匹配属性在命名空间中不是。
The last two rules are equivalent and will match only elements with the attribute att where the attribute is not in a namespace.
看到这个小提琴，注意填充样式（默认，悬停和活动）：
http://fiddle.jshell.net/eg43L/
See this fiddle, paying attention to the fill styles (default, hover, and active):
http://fiddle.jshell.net/eg43L/
Selectors API采用CSS选择器语法，但没有相当于用于定义命名空间的 @namespace 规则。因此，具有命名空间的选择器无效但是通配符名称空间令牌是有效的：
The Selectors API adopts the CSS selector syntax, but has no equivalent to the @namespace rule for defining a namespace. As a result, selectors with namespaces are not valid but the wildcard namespace token is valid:
如果选择器组包含命名空间前缀，需要解决，执行必须引发SYNTAX_ERR异常（[DOM-LEVEL-3-CORE]，第1.4节）。
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.
如果命名空间前缀需要解析，则需要解析命名空间前缀命名空间组件既不为空（例如 | div ），表示空名称空间或星号（例如 * | div ），代表任何命名空间。 由于星号或空名称空间前缀不需要解析，所以在选择器中支持命名空间语法的实现必须支持这些。
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.
（加粗体）
查看小提琴再次，这次注意控制台的输出。命令 document.querySelector（'[* | href =＃url]'）返回您想要的元素。
Check out the fiddle again, this time paying attention to the console output. The command document.querySelector('[*|href="#url"]') returns the element you want.
最后一个警告： MDN 告诉我IE8 - 不支持CSS命名空间，所以这可能不适用于他们。
One final warning: MDN tells me that IE8- do not support CSS namespaces, so this might not work for them.
更新2015-01-31 ：
由于@ Netsi1964在注释中指出，这对HTML 5文档中的自定义命名空间属性无效，因为HTML不支持XML命名空间。 （它可以在独立的SVG或其他XML文档（包括XHTML）中工作。）
As @Netsi1964 pointed out in the comments, this doesn't work for custom namespaced attributes in HTML 5 documents, since HTML doesn't support XML namespaces. (It would work in a stand-alone SVG or other XML document including XHTML.)
当HTML5解析器遇到类似于 data的属性：myAttribute =value它将其视为属性名称的单个字符串，包括：。为了使事情更加混乱，它会自动缩小字符串。
When the HTML5 parser encounters an attribute like data:myAttribute="value" it treats that as a single string for the attribute name, including the :. To make things more confusing, it auto-lowercases the string.
要获取 querySelector 以选择这些属性，您必须包含数据：作为属性字符串的一部分。但是，由于：在CSS选择器中具有特殊的含义，您需要使用 \ 字符来转义它。而且，由于您需要将 \ 作为选择器的一部分进行传递，因此您需要在JavaScript中转义 。
To get querySelector to select these attributes, you have to include the data: as part of the attribute string. However, since the : has special meaning in CSS selectors, you need to escape it with a \ character. And since you need the \ to get passed through as part of the selector, you need to escape it in your JavaScript.
因此，成功的调用如下所示：
The successful call therefore looks like:
document.querySelector('[data\\:myattribute="value"]');
为了使事情更合乎逻辑，我建议您使用属性名称的所有小写，因为HTML 5解析器将会转换它们。 Blink / Webkit浏览器将自动选择您通过 querySelector 的选择器，但这实际上是一个非常有问题的错误（意味着您永远不能选择具有混合大小写标签名称的SVG元素）。
To make things a little more logical, I would recommend using all lower-case for your attribute names, since the HTML 5 parser will convert them anyway. Blink/Webkit browser will auto-lowercase selectors you pass querySelector, but that's actually a very problematic bug (in means you can never select SVG elements with mixed-case tag names).
但是，相同的解决方案适用于 xlink：href ？没有！ HTML 5解析器在SVG标记中识别 xlink：href ，并正确地将其解析为命名空间属性。
But does the same solution work for xlink:href? No! The HTML 5 parser recognizes xlink:href in SVG markup, and correctly parses it as a namespaced attribute.
< a href =http://fiddle.jshell.net/eg43L/3/ =noreferrer>这是更新的小提琴与额外的测试。再次看看控制台的输出，看看结果。在Chrome 40，Firefox 35和IE 11中进行测试;唯一的不同之处在于Chrome与混合大小写选择器匹配。
Here's the updated fiddle with additional tests. Again, look at the console output to see the results. Tested in Chrome 40, Firefox 35, and IE 11; the only difference in behavior is that Chrome matches the mixed-case selector.
这篇关于是否可以使用HTML的.querySelector（）来通过SVG中的xlink属性进行选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
