Narkiew Narkiew - 3 months ago 9
HTML Question

SVG IMAGE (background class) - doesn't work on Firefox

I have issue with svg image when I using class for background color(for stroke),

Its seems work fine on chrome and safari etc, but the firefox have issue when I use background color then he show only block box, any idea how can we fix it?!!!

Help!!!

I use the same example in my work and the issue is only on Firefox:

PLEASE SEE WORK EXAMPLE BELOW:



.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

Try copying the SVG file to your source files, cleaning it up (from things like fill in path properties) and using clip-path method described here: https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content