我正在制作一個 AJAX 獲取請求，該請求回傳一個包含完全限定 SVG 的 XML 物件。在瀏覽器的檢查器中，我可以看到回應標頭指示它是“應用程式/xml”，并且我可以看到回應本身：<svg> .... </svg>，正確地使用命名空間標頭等結構。
然后我嘗試在 a 中渲染物件，它正在渲染 [object Object] 而不是內容本身。如果 AJAX 呼叫填充了 var 'src'，我會寫：
element = document.getElementById('myDiv');
element.innerHTML = src;
我已經查看了有關此的各種其他文章，例如使用 DOMParser，但我得到的最好的結果是它呈現類似 [object XMLElement] 之類的東西。非常令人沮喪。
有沒有一種簡單的方法可以將實際的 SVG 放在標簽之間，以便在其中呈現圖形？
uj5u.com熱心網友回復：
您只需要一個原生 JavaScript Web 組件<load-file src="">
customElements.define("load-file", class extends HTMLElement {
// declare default connectedCallback as sync so await can be used
async connectedCallback(
// call connectedCallback with parameter to *replace* SVG (of <load-file> persists)
src = this.getAttribute("src"),
// attach a shadowRoot if none exists (prevents displaying error when moving Nodes)
// declare as parameter to save 4 Bytes: 'let '
shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"})
) {
// load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML
shadowRoot.innerHTML = await (await fetch(src)).text()
// append optional <tag [shadowRoot]> Elements from inside <load-svg> after parsed <svg>
shadowRoot.append(...this.querySelectorAll("[shadowRoot]"))
// if "replaceWith" attribute
// then replace <load-svg> with loaded content <load-svg>
// childNodes instead of children to include #textNodes also
this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes)
}
})<load-file src="//load-file.github.io/heart.svg"></load-file>完整檔案：https ://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd
uj5u.com熱心網友回復：
您可能應該rootElement.outerHTML從物件中獲取 ，因為它是一個回傳的 XML 檔案。
該示例應顯示一個藍色方塊。我對請求使用資料 URL，但可以用普通 URL 替換。
$.ajax({
type: "GET",
url: "data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHZpZXdCb3g9IjAgMCAxMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9ImJsdWUiLz4KPC9zdmc Cgo=",
dataType: "xml",
success: function(xml) {
$('#myDiv').html(xml.rootElement.outerHTML);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv" style="width: 200px"></div>uj5u.com熱心網友回復：
所以整個問題是在我的 $.ajax 呼叫中，我有引數dataType: 'application/xml'。通過將值更改為只是'xml'甚至洗掉它并讓它猜測，那么我的回應是一個有效的 XMLDocument。
由于值不正確，它創建了一個空物件，這是我所有問題的根源。
感謝大家的幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/492509.html