img标签中SVG整体透明

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标签添加它时，如 <img src="my.svg"> 它采用了svg中定义的尺寸，但它是透明的。

我试着上传svg，但文件类型不支持，所以我创建了个 要点 在那里它也不工作。这真是太奇怪了。

它应该是这样的。

请告诉我为什么这个不能正常工作 Please tell me why this isn't working as expected. 如果有问题的话，我在Windows 10上使用Firefox 76。

Answer 1

比如说，用一个嵌入标签代替img:

<embed src="yourfile.svg">

确保路径正确

Answer 2

是的，SVG内容有CORS限制。https:/oreillymedia.github.ioUsing_SVGextrasch10-cors.html。

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

1. 把IMG的URL加载到内存中 new Image()
2. 转移到CANVAS上
3. 从CANVAS中提取图像到DataURL字符串。
4. 写完整的SVG数据URI 绳子 (不是SVG文件的url)到你的hostIMG src中。

有了W3C标准的自定义元素，你就可以把它当作。

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

JSFiddle在："https：/jsfiddle.netCustomElementsExamplescuwrm7ba"。https:/jsfiddle.netCustomElementsExamplescuwrm7ba。

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