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

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)
   );   
}    

我得到invalidIteratorStatenull,singleNodeValue或者snapshotLength0.

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

有没有evaluate()我没有听说过的限制,或者我只是完全错了？

为了澄清,我的最终目标是能够xAxis <text>在一行代码中提取例如Google可视化元素.就像现在一样(参见演示)我必须<svg>使用多个querySelectorAll/ getElementsByTagNameetc 来迭代,这不是非常易读,维护友好或优雅.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)