將 svg 顯示為來自外部 url 的圖像

Question

我有一個 Firebase 存儲桶，里面有 svg 文件。 每個文件的 url 都存儲在 Firestore 中。 我正在從 firestore 獲取 url，因此我可以在 html 中將 svg 顯示為圖像。 我正在使用香草 HTML、CSS 和 JS 並使用 UIKit 進行布局。

我所說的“將 svgs 顯示為圖像”的意思是：

• 我希望用戶能夠右鍵單擊，然后單擊“將圖像另存為”。
• 我不希望我的 CSS 以任何方式影響 svg。
• 我不需要以編程方式操作 SVG。

我正在使用 UIKit 並嘗試了他們記錄的兩種顯示 svg 的方法：

方法一：作為內聯 svg 鏡像

var source = logo.imageURL;

var div = document.createElement("div");
var img = document.createElement("img");
img.width = 160;
img.src = source;
img.setAttribute("uk-svg", "");
div.appendChild(img)
parent.appendChild(div);

這導致能夠查看頁面上的 svg，但是：

• 您不能右鍵單擊它們來保存它們
• UIKit 的 CSS 正在影響 colors（所有填充均為灰色）。

方法二：使用 Image 組件延遲加載

var source = logo.imageURL;

var div = document.createElement("div");
var img = document.createElement("img");
img.width = 160;
img.src = source;
img.setAttribute("uk-img", "data-src:" + source);
img.setAttribute("uk-svg", "");
div.appendChild(img)
parent.appendChild(div);

這導致 svg 顯示為空白的白色方塊。

我做過的其他測試：

我抓取了一個 svg 文件並將其添加到我的前端/images文件夾中，並對source變量進行硬編碼以使用本地文件。 SVG 顯示得很好，並且符合我上面的所有標准，所以我認為文件本身沒有問題。

對此的任何幫助或建議都會很棒。

Answer 1

使用 vanilla HTML5，如果您想要 CSS 隔離，您需要將其放置在shadowDOM中（所有現代瀏覽器都支持）

將 shadowDOM 附加到您自己的<span>元素；

或者更進一步，創建您自己的可重復使用的 HTML 元素<shadow-svg> （或您想要的任何名稱）

注意：作為 IMG src 的 SVG 應該足以不受全局 CSS 的影響； 所以 shadowDOM 不是嚴格要求的。 在此示例中，它確保 IMG 不能被全局 CSS 設置樣式。

 <span id=SVG></span> <shadow-svg src="https://svgshare.com/i/U7z.svg"></shadow-svg> <shadow-svg src="https://svgshare.com/i/U7o.svg"></shadow-svg> <shadow-svg src="https://svgshare.com/i/U7p.svg"></shadow-svg> <style> #SVG { height: 130px; background: pink } </style> <script> SVG.attachShadow({ mode: "open" }).innerHTML = `<style>:host{display:inline-block}img{height:130px;width:130px}</style>` + `<img src="https://svgshare.com/i/U7L.svg">`; // OR customElements.define("shadow-svg", class extends HTMLElement { constructor() { super().attachShadow({ mode: "open" }).innerHTML = `<style>:host{display:inline-block}img{height:130px;width:130px}</style>` + `<img src="${this.getAttribute("src")}">`; } }); </script>