将 svg 显示为来自外部 url 的图像 [英] Display svg as image from external url

问题描述

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

I have a Firebase storage bucket with svg files in it. The urls for each file are stored in Firestore. I am fetching the urls from firestore so I can display the svgs as images in html. I am using vanilla HTML, CSS, and JS and using UIKit for layout.

我所说的将 svgs 显示为图像"是什么意思?是:

What I mean by "display the svgs as images" is:

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

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

I am using UIKit and have tried both of their documented methods of displaying svgs:

方法 1:作为 内嵌 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，但是:

This results in the ability to see the svgs on the page, but:

• 您不能右键单击它们来保存它们
• UIKit 的 CSS 会影响颜色(所有填充均为灰色).

方法二:使用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);

这导致 svgs 显示为空白的白色方块.

This results in the svgs showing up as blank white squares.

我做过的其他测试:

我抓取了其中一个 svg 文件并将其添加到我的前端 /images 文件夹中，并对 source 变量进行硬编码以使用本地文件.SVG 显示良好，符合我上面的所有标准，所以我认为文件本身没有问题.

I grabbed one of the svg files and added it to my frontend /images folder and hardcoded the source variable to use the local file. The SVGs showed up fine, and met all my criteria above, so I assume there's nothing wrong with the file itself.

任何有关这方面的帮助或建议都会很棒.

Any help or advice with this would be great.

推荐答案

使用 vanilla HTML5，如果你想要 CSS 隔离，你需要把它放在 shadowDOM(所有现代浏览器都支持)

With vanilla HTML5, if your want CSS isolation you need to place it in shadowDOM (supported in all modern browsers)

或者将 shadowDOM 附加到您自己的 元素；

Either attach shadowDOM to your own <span> element;

或者更进一步，创建您自己的可重复使用的 HTML 元素 <shadow-svg>(或您想要的任何名称)

Or take it one step further and create your own re-usable HTML Element <shadow-svg> (or any name you want)

注意:SVG 作为 IMG src 应该足以不受全局 CSS 的影响；所以 shadowDOM 不是严格要求的.在这个例子中，它确保 IMG 不能被全局 CSS 设置样式.

Note: the SVG being an IMG src should be enough to not be affected by global CSS; so shadowDOM not strictly required. It ensures the IMG can not be styled by global CSS in this example.

<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 的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！