使用 document.evaluate() 提取 <svg> 元素?
Extract <svg> element by using document.evaluate()?
我正在尝试使用 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
等来遍历 <svg>
,这不是很可读,维护友好或优雅。从 google 开发人员工具中获取 xpath
并在一行中重用它会很好。
SVG 元素位于命名空间 http://www.w3.org/2000/svg
中,对于具有 XPath 的命名空间中的 select 元素,您需要将前缀绑定到命名空间 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)
我正在尝试使用 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
等来遍历 <svg>
,这不是很可读,维护友好或优雅。从 google 开发人员工具中获取 xpath
并在一行中重用它会很好。
SVG 元素位于命名空间 http://www.w3.org/2000/svg
中,对于具有 XPath 的命名空间中的 select 元素,您需要将前缀绑定到命名空间 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)