使用<svg> ()提取document.evaluate元素？

Question

我试图使用document.evaluate()从<svg>元素中提取某些子元素。但是，仅仅提取<svg>本身就有问题。我可以把所有东西提取到<svg>，但不能再提取了。例如，这很有效：

document.evaluate('//*[@id="chart"]/div/div[1]/div', document, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null).singleNodeValue)

这给了我(简称)：

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" aria-label="Et diagram.">
    <svg width="600" height="400" aria-label="Et diagram." style="overflow: hidden;"></svg>
    <div aria-label="En repræsentation i tabelformat af dataene i diagrammet." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;"></div>
</div>

然后我假设

//*[@id="chart"]/div/div[1]/div/svg

会给我<svg> -但什么都不管用。尝试了所有响应类型：

for (var type=XPathResult.ANY_TYPE; type<XPathResult.FIRST_ORDERED_NODE_TYPE+1; type ++) {
   console.dir(
      document.evaluate('//*[@id="chart"]/div/div[1]/div/svg', document, null, type, null)
   );   
}    

我得到invalidIteratorState、null singleNodeValue或snapshotLength值为0。

演示-> http://jsfiddle.net/hw79zp7j/

我没有听说过的evaluate()有什么限制，还是我做错了？

为了澄清起见，我的最终目标是能够在一行代码中提取google可视化xAxis <text>元素。现在(请参阅演示)，我必须使用多个querySelectorAll / getElementsByTagName等来迭代整个querySelectorAll/getElementsByTagName，这不是很容易读、维护也不是很友好或优雅。只要从google工具中获取xpath并在一行中重用它，那就太好了。

Answer 1

SVG元素位于名称空间http://www.w3.org/2000/svg中，要使用XPath选择名称空间中的元素，需要将前缀绑定到命名空间URI，并在路径中使用该前缀来限定元素名(例如svg:svg )。因此，使用一个解析器作为evaluate的第三个参数，它将您可以选择的前缀(例如svg)映射到上面提到的命名空间URI。

document.evaluate('//*[@id="chart"]/div/div[1]/div/svg:svg', document, 
                                function(prefix) { 
                                    if (prefix === 'svg') 
                                    { 
                                        return 'http://www.w3.org/2000/svg';
                                    }
                                    else
                                    {
                                        return null;
                                    }
                                }, type, null)