通過使用document.evaluate（）提取<svg>元素？

我正在嘗試使用document.evaluate()從<svg>元素中提取某些子元素。但我只是提取<svg>本身有問題。我可以將所有內容提取到<svg>，但沒有更多。例如，這工作得很好：通過使用document.evaluate（）提取<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，空singleNodeValue或snapshotLength 0的

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

有沒有我還沒有聽說過evaluate()任何限制，還是我只是完全錯了？

爲了說明問題，我的最終目標是能夠在單行代碼中提取例如谷歌可視化元素xAxis<text>元素。因爲它現在（見演示）我必須通過使用多個querySelectorAll/getElementsByTagName等迭代通過<svg>，這是不可讀性，維護友好或優雅。只需從Google開發人員工具中抓取xpath並將其重複使用即可。

來源

2015-07-01 davidkonrad

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)

來源

2015-07-01 13:31:56

是的，那有效！其實我一直在' davidkonrad

XPath最初是爲使用名稱空間的XML文檔定義的，而在XML中，您需要編寫''來標記SVG元素正確地讓任何用戶代理識別您的SVG。但是現在我們生活在HTML5的世界中，HTML5，SVG和MathML的混合體可以在沒有聲明任何命名空間的情況下被允許。儘管如此，這些元素有一個名稱空間，甚至選擇沒有前綴的HTML也只能像HTML5規範所說的那樣在http://www.w3.org/TR/html5/infrastructure.html#interactions-with-xpath-and-xslt 。 –

通過使用document.evaluate（）提取<svg>元素？

回答

相關問題