SVG IMAGE (Hintergrundklasse) - funktioniert nicht auf Firefox

Question

Ich habe Problem mit svg Bild, wenn ich für die Hintergrundfarbe (für Schlaganfall) unter Verwendung von Klasse,

Seiner scheint gut funktioniert auf Chrom und Safari etc, aber die firefox haben Problem, wenn ich Hintergrundfarbe dann verwende, zeige er nur Blockkasten, irgendeine Idee, wie wir es beheben können? !!!

Hilfe !!!

Ich verwende das gleiche Beispiel in meiner Arbeit und das Problem ist nur auf Firefox:

BITTE WORK Beispiel unten:

.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

Versuchen Sie, die SVG-Datei zu kopieren, um Ihre Quelldateien, bereinigen sie (von Dingen wie fill in Pfadeigenschaften) und unter Verwendung der hier beschriebenen Clip-Path-Methode: https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content