将 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>