Why does FF render svg incorrectly?

Question

css

This is how I insert an SVG image into a document

<?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>

Then like this:

<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');
}

everywhere, even in IE an icon is displayed, but in FF it is just a square
. What is the problem and how to fix it?

Answer 1

I made a codepen , checked it in ff - everything works. Version ff - 42.0