SVG在img标签中完全透明

Question

我有一个奇怪的问题，我想屏蔽图像，为了简单起见，我尝试了 svg 方式，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="217.714" height="321.143" viewBox="0 0 58 85">
  <defs>
    <mask id="a">
      <path d="M22.5 0L45 31.5 22.5 63 0 31.5z" fill="#fff"/>
    </mask>
  </defs>
  <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg" mask="url(#a)" preserveAspectRatio="xMidYMid slice" width="45" height="63" transform="translate(6.5 14.5)"/>
</svg>

我的问题是当我嵌入此图像时，它似乎是透明的。当我在浏览器中打开它时，它会按预期工作。但是，当我使用 <img src="my.svg"> 之类的 img 标签添加它时，它采用 svg 中定义的尺寸，但它是透明的。

我尝试上传 svg，但文件类型不受支持，因此我创建了一个 gist，但它也无法正常工作。太奇怪了。

应该是这样的：

请告诉我为什么这没有按预期工作。如果重要的话，我在 Windows 10 上使用 Firefox 76。

Answer 1

使用嵌入标签而不是 img。例如：

<embed src="yourfile.svg">

确保路径正确

Answer 2

是的，
SVG 内容有 CORS 限制：https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html

但你可以通过一些技巧绕过它：

1. 使用new Image() 将IMG URL 加载到内存中
2. 将其转移到画布上
3. 从 CANVAS 中提取图像到 DataURL 字符串
4. 将完整的 SVG DataURI 字符串（不是 SVG 文件的 url）写入您的 hostIMG src

使用 W3C 标准自定义元素，您可以将其用作：

<masked-img src="https://i.picsum.photos/id/21/200/200.jpg" mask="circle"></masked-img>

JSFiddle 在：https://jsfiddle.net/CustomElementsExamples/cuwrm7ba/

<template id="one">
  <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 50 50'>
    <mask id="circle"><circle cx='50%' cy='50%' r='20' fill="#fff" /></mask>
    <mask id="diamond">
      <polygon points="25 0 50 25 25 50 0 25" fill="#999" stroke="#f00" stroke-width="5" />
    </mask>
    <image mask='url(#MASK)' x='0' y='0' width='50' height='50' href='IMG' />
  </svg>
</template>

<script>
  customElements.define('masked-img', class extends HTMLElement {
    static get observedAttributes() {
      return ["src", "mask"]; // update whenever these attributes change
    }
    connectedCallback() {
      this.hostIMG = this.appendChild(document.createElement("IMG"));
    }
    attributeChangedCallback() {
      let svgTemplate = document.querySelector(this.getAttribute("svg")).innerHTML;
      let loadIMG = new Image();
      loadIMG.crossOrigin = 'anonymous';//!! required
      loadIMG.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = loadIMG.width;
        canvas.height = loadIMG.height;
        canvas.getContext("2d").drawImage(loadIMG, 0, 0);
        this.hostIMG.src = `data:image/svg+xml,` +
          svgTemplate.replace('IMG', canvas.toDataURL("image/png"))
          .replace('MASK', this.getAttribute("mask"))
          .replace(/"/g, "'").replace(/#/g, "%23");// illegal characters in dataURI
      };
      loadIMG.src = this.getAttribute("src");// triggers above onload
    }
  });

</script>

<style>
  img {
    width: 20%;
    background: grey;
  }

</style>

<img src="https://i.picsum.photos/id/21/200/200.jpg">
<masked-img svg="#one" src="https://i.picsum.photos/id/21/200/200.jpg" mask="circle"></masked-img>
<img src="https://i.picsum.photos/id/3/100/100.jpg">
<masked-img svg="#one" src="https://i.picsum.photos/id/3/100/100.jpg" mask="diamond"></masked-img>