相对单位 CSS 剪辑路径？

Question

我正在尝试定义一个clip-path给定的元素。
在 Chrome 上没有问题（感谢多边形！），但在 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

啊! 没关系，找到解决方案了。

我必须使用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>