将 svg 显示为来自外部的图像 url

Question

我有一个 Firebase 存储桶，里面有 svg 文件。每个文件的 URL 都存储在 Firestore 中。我正在从 firestore 获取 url，因此我可以将 svgs 显示为 html 中的图像。我正在使用 vanilla HTML、CSS 和 JS，并使用 UIKit 进行布局。

我所说的“将 svg 显示为图像”的意思是：

我希望用户能够右键单击，然后单击“将图像另存为”。
我不希望我的 CSS 以任何方式影响 svgs。
我不需要以编程方式操作 SVG。

我正在使用 UIKit 并尝试了他们记录的两种显示 svgs 的方法：

方法 1：作为 inline svg image

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 正在影响颜色（所有填充均为灰色）。

方法二：lazy loading using Image component

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>（或您想要的任何名称）

注意：SVG是一个IMG src应该足以不受全局影响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>

将 svg 显示为来自外部的图像 url

Display svg as image from external url

html

javascript

svg

image

uikit