SVG IMAGE（背景类）- 不适用于 Firefox

Question

当我使用类作为背景颜色（用于描边）时，我遇到了 svg 图像的问题，

它似乎在 chrome 和 safari 等上运行良好，但是当我使用背景颜色时，Firefox 出现问题，然后他只显示块框，知道如何解决它吗？！！！

求救！！！

我在工作中使用了相同的示例，但问题仅在 Firefox 上：

请查看下面的工作示例：

.icon {
  width: 48px;
  height: 48px;
  display: inline-block;
  
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.icon-red { background-color: red; }
.icon-orange { background-color: orange; }
.icon-yellow { background-color: yellow; }
.icon-green { background-color: green; }
.icon-blue { background-color: blue; }
.icon-indigo { background-color: indigo; }
.icon-violet { background-color: violet; }

.icon-cyan { background-color: cyan; }
.icon-magenta { background-color: magenta; }
.icon-lime { background-color: lime; }
.icon-olive { background-color: olive; }
.icon-maroon { background-color: maroon; }
.icon-purple { background-color: purple; }

.icon-white { background: white; }
.icon-gray10 { background: #e5e5e5; }
.icon-gray20 { background: #ccc; }
.icon-gray30 { background: #b2b2b2; }
.icon-gray40 { background: #999; }
.icon-gray50 { background: #7f7f7f; }
.icon-gray60 { background: #666; }
.icon-gray70 { background: #4c4c4c; }
.icon-gray80 { background: #333; }
.icon-gray90 { background: #191919; }
.icon-black { background: black; }

.icon-gradient { 
  background: -webkit-radial-gradient(50% 50%, red, white);
  background: radial-gradient(50% 50%, red, white); 
}

.icon-kitten { 
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/grumpy.jpeg) 50% 0%;
  background-size: cover;
}

.icon-animation { 
  background: red;
  -webkit-animation: ❤ 6.66s infinite linear;
  animation: ❤ 6.66s infinite linear; 
}

@-webkit-keyframes ❤ {
  0% { background-color: red; }
  16% { background-color: orange; }
  32% { background-color: yellow; }
  48% { background-color: green; }
  60% { background-color: blue; }
  72% { background-color: indigo; }
  84% { background-color: violet; }
}

@keyframes ❤ {
  0% { background-color: red; }
  16% { background-color: orange; }
  32% { background-color: yellow; }
  48% { background-color: green; }
  60% { background-color: blue; }
  72% { background-color: indigo; }
  84% { background-color: violet; }
}

/* LAYOUT */
html, body { height: 100%; }

body { 
  background: #fcfcfc; 
  margin: 0;
}

.wrap { 
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

<div class="wrap">
    <div class="icon icon-red"></div>
    <div class="icon icon-orange"></div>
    <div class="icon icon-yellow"></div>
    <div class="icon icon-green"></div>
    <div class="icon icon-blue"></div>
    <div class="icon icon-indigo"></div>
    <div class="icon icon-violet"></div><br/>

    <div class="icon icon-cyan"></div>
    <div class="icon icon-magenta"></div>
    <div class="icon icon-lime"></div>
    <div class="icon icon-olive"></div>
    <div class="icon icon-maroon"></div>
    <div class="icon icon-purple"></div><br/>

    <div class="icon icon-white"></div>
    <div class="icon icon-gray10"></div>
    <div class="icon icon-gray20"></div>
    <div class="icon icon-gray30"></div>
    <div class="icon icon-gray40"></div>
    <div class="icon icon-gray50"></div>
    <div class="icon icon-gray60"></div>
    <div class="icon icon-gray70"></div>
    <div class="icon icon-gray80"></div>
    <div class="icon icon-gray90"></div>
    <div class="icon icon-black"></div><br/>

  </div>
</div>

Answer 1

尝试将 SVG 文件复制到源文件，清理它（从路径属性中的 fill 之类的内容中）并使用此处描述的 clip-path 方法： https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content