Относительные единицы CSS-клип-путь?

Question

Я пытаюсь определить clip-path сделать данный элемент.
В Chrome нет проблем (спасибо polygon!), Но в Firefox я не могу найти способ получить тот же результат, используя альтернативу url.

Этот клип-путь просто разрежет весь элемент на Firefox, и я не могу найти способ заставить его работать надлежащим образом.
Как вы можете видеть, он должен использовать относительные значения.

CSS:

.element { 
    clip-path: url(../jobs-shape.svg#path); 
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 100%); 
} 

SVG:

<?xml version="1.0" standalone="no"?> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
    <defs> 
    <clipPath id="path"> 
     <polygon points="0 0, 1 0.15, 1 1, 0 1" /> 
    </clipPath> 
    </defs> 
</svg> 

Что я делаю неправильно?

Answer 1

Ах! Nevermind, нашел решение.

Я должен использовать clipPathUnits="objectBoundingBox":

<?xml version="1.0" standalone="no"?> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <clipPath id="path" clipPathUnits="objectBoundingBox"> 
     <polygon points="0 0, 1 0.15, 1 1, 0 1" /> 
    </clipPath> 
    </defs> 
</svg>