我正在使用 API 呼叫回傳 SVG，但請求作為 SVG 的 url 回傳，我需要編輯 SVG 顏色但無法訪問 SVG 行內資料。這個 url 會因每個請求而不同
這是從 fetch 回傳的 SVG 的示例 URL。
url: "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=test&format=svg"
有什么方法可以直接訪問 SVG 中的資料，例如路徑？或者我可以創建 SVG 的副本并將其轉換為行內 SVG？
我在 jquery 中看到了一些建議，但想使用 vanilla javascript 或 react 庫。
uj5u.com熱心網友回復：
你可以暫時把它放在一個div例如然后你可以訪問 HTMLElement 原型
fetch('https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=test&format=svg')
.then(res => res.text())
.then(res => {
const holder = document.createElement('div')
holder.innerHTML = res
console.log(holder.querySelector('path'))
})
uj5u.com熱心網友回復：
您可以在shadowDOM中加載外部 SVG 檔案，并僅將樣式應用于其shadowDOM，
使用 8 行 Vanilla JavaScript, <load-file>Web Component from DEV.to load content
(完整代碼如下)
您的示例 SVG 具有行內style定義；你不能用 CSS 否決那些。
我在 Web 組件中添加了 1 行以洗掉所有style屬性，以使 CSS 生效。
對于 React 版本，只需添加6553 位元組的 React 庫、133427 位元組的 React-DOM 庫和大約 10 多行代碼。（當然還有一個構建步驟）
customElements.define("load-svg", class extends HTMLElement {
async connectedCallback(
src = this.getAttribute("src"),
shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"})
) {
shadowRoot.innerHTML = await (await fetch(src)).text();
shadowRoot.append(...this.querySelectorAll("[shadowRoot]"));
this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes);
[...shadowRoot.querySelectorAll("[style]")].map(el=>el.removeAttribute("style"));
}
})<load-svg src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=test&format=svg">
<style shadowRoot>
rect {
fill:yellow;
}
path {
stroke:red;
fill:red;
}
</style>
</load-svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486827.html
標籤：javascript html 图片 svg