翻譯/地圖SVG圖像元素爲DOM/XML

我想將SVG圖像元素翻譯成它的xml文本行。換句話說，如果在（0,0）處有一個正方形，我想在SVG文本文件中找到它是相應的xml行。翻譯/地圖SVG圖像元素爲DOM/XML

現在，我知道我可以搜索svg xml文件來查找這些座標並找到它。但難度是轉換和剪輯。這些可能意味着一個元素的位置可能在svg xml和real svg圖像中不同。

總之，我想要做的就是類似於web-inspector（safari）的功能。但我想自己實現它。我發現了幾個關於如何編寫dom檢查員的鏈接。但是要求SVG在每個元素中都有onmouseclick或onmousehover函數。 我想要做的是，編寫一個程序，可以採取任何隨機svg，其中一旦選擇一個元素，我可以得到其相應的xml行。

我希望有人能指導我如何去做這件事。

來源

2017-08-15 user3902003

從什麼標記xml線？你最初寫的那個？它不再存在於頁面中。你現在可以從序列化整個文檔中獲得一個嗎？你只能通過序列化svg節點在這個時間？ – Kaiido

我指的是SVG圖像本身的XML行。我希望獲得SVG元素的相關XML行，當我在SVG圖像本身中選擇SVG元素時。與Safari瀏覽器中發生的情況類似。在svg圖像中單擊多邊形時，它會從svgs'xml中爲您找到。 – user3902003

調用document.elementFromPoint，然後使用XMLSerializer序列化您從中獲得的元素 –

謝謝Robert Longson。我從你的幫助中得到了答案。

我按照他的建議使用了'elementFromPoint（）'函數。假設程序已經知道它想檢查哪個座標（100,60）;通過調用elemenfrompoint（）在window.onload（）我得到的答案如下。

window.onload = function(){ 
    cord_element = document.elementFromPoint(100,60); 
    alert("element is :"+cord_element.id); 
}

來源

2017-08-25 06:44:33 user3902003

翻譯/地圖SVG圖像元素爲DOM/XML

回答

相關問題