Почему FF неправильно отображает svg?

Question

[booogabooo]

Вот по такому принципу вставляю 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 - просто квадрат
В чем проблема и как исправить?

Comments

[monochromer]

Посмотрите пример - https://jsfiddle.net/vhhnna88/.
Здесь ваш код корректно отображается в FF (42).

Answer 1

[Максим Гатилин]

Сделал codepen, проверил в ff - все работает.Версия ff - 42.0