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>

相对单位CSS剪辑路径？

1 个答案: