Вот по такому принципу вставляю SVG картинку в документ
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="heart-path">
<path fill-rule="evenodd" clip-rule="evenodd" d="M256,512c0,0-256-144.938-256-311.694C0,29.22,240.62,10.145,256,192 c18.467-181.721,256-162.784,256,8.306C512,367.062,256,512,256,512z"/>
</clipPath>
</defs>
</svg>
Потом вот так:
<svg class="heart-icon icon" viewBox="0 0 512 512">
<rect width="512" height="512" />
</svg>
.icon{
width:32px;
height:32px;
cursor:pointer;
fill: #ccc;
}
.heart-icon rect{
clip-path:url('#heart-path');
}
везде, даже в IE отображается иконка, а в FF - просто квадрат
В чем проблема и как исправить?
