javascript - SVG IMAGE(背景类)——不适用于 Firefox

Question

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

它似乎在 chrome 和 safari 等上工作正常，但是当我使用背景色时 firefox 有问题然后他只显示 block 框，知道我们如何解决它吗？!!!

求助!!!

我在工作中使用了相同的示例，但问题仅出现在 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