CSS SVG clip-path url не работает в firefox

Question

Я следовал из и вводил коды в свой проект. Все хорошо, но в Firefox все неправильно, и клип не работает.

<svg class="clip-svg"> 
    <defs> 
    <clipPath id="test-clip" clipPathUnits="objectBoundingBox"> 
     <polygon points="0 0, 0.73 0, 1 0.59, 0.48 1, 0 075" /> 
    </clipPath> 
    </defs> 
</svg> 
<figure class="clip-block"> 
    <div class="clip-each clip-solid my-clip-path"> 
    <div class="clip-entry"> 
     <figcaption> 
     Test Clip 
     </figcaption> 
     </div> 
    </div> 
</figure> 

html, body, .clip-block { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 
.clip-svg { 
    width: 0; 
    height: 0; 
} 
.clip-each { 
    display: block; 
    position: absolute; 
    margin: 0 auto; 
    -webkit-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out; 
} 
.clip-solid { 
    width: 300px; 
    height: 300px; 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    background-color: #FF4081; 
    cursor: pointer; 
    overflow: hidden; 
} 
.my-clip-path { 
    width: 38.5%; 
    height: 74.5%; 
    background-image: url('http://placehold.it/500x500'); 
    background-color: #31686e; 
    -webkit-clip-path: polygon(80.9% 9.1%, 100% 0, 100% 100%, 0 100%); 
    clip-path: polygon(80.9% 9.1%, 100% 0, 100% 100%, 0 100%); 
    -webkit-clip-path: url("#test-clip"); 
    -moz-clip-path: url("#test-clip"); 
    -ms-clip-path: url("#test-clip"); 
    clip-path: url("#test-clip"); 
} 

Это очень странно! Я поместил свои коды в jsfiddle и правильно работал в firefox, но когда я создаю свой собственный html с одинаковыми кодами, Firefox бьет все и игнорирует клип-путь.

Этот проект должен быть выполнен быстро.

Answer 1

Я решил это!

Новый CSS:

.my-clip-path { 
    width: 38.5%; 
    height: 74.5%; 
    background-image: url('http://placehold.it/500x500'); 
    background-color: #31686e; 
    -webkit-clip-path: polygon(80.9% 9.1%, 100% 0, 100% 100%, 0 100%); 
    clip-path: polygon(80.9% 9.1%, 100% 0, 100% 100%, 0 100%); 
    -webkit-clip-path: url("index.html#test-clip"); 
    -moz-clip-path: url("index.html#test-clip"); 
    -ms-clip-path: url("index.html#test-clip"); 
    clip-path: url("index.html#test-clip"); 
}