如何使用document.evaluate查询svg元素？

Question

我有一个带有div元素的文档，其中包含一个svg元素。

当我查询div元素时，我得到一个返回值，它甚至显示了svg子元素。

$x('//div')
[<div class=​"schema">​…​</div>​, <div class=​"relations">​<svg class=​"relations">​…​</svg>​</div>​]

但是，当我查询svg元素本身时，不会得到任何结果。

$x('//svg')
[]

我也不知道为什么。我在Chromium45.0.2454.85中做了这个。

有人能解释一下这里发生了什么吗？

Answer 1

SVG元素位于SVG命名空间http://www.w3.org/2000/svg中，如果使用evaluate DOM方法，则可以将名称空间解析器作为第三个参数传递：

​

function setFill(xpath, color) {
  var el = document.evaluate(xpath, document, function(prefix) { if (prefix === 'svg') { return 'http://www.w3.org/2000/svg'; }}, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  if (el !== null) {
    el.setAttribute('fill', color);
  }
}

<div>
  <svg width="200" height="200">
    <circle cx="100" cy="100" r="50" fill="green"/>
  </svg>
  <input type="button" value="red" onclick="setFill('//svg:circle', 'red');">
</div>

​

我不知道开发人员工具中的$x函数是否允许类似的东西。