SVG圖像（背景類） - 未在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等東西）並使用此處描述的剪輯路徑方法： https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content