mozilla 的剪辑路径多边形不起作用

Question

在Mozilla中是否可以实现给定的样式？我在 css 中使用了剪辑路径，但是当我尝试在 mozila 上测试它时，剪辑路径不起作用

Answer 1

Firefox 仅支持 clip-path: url() 语法的部分支持。因此，要在 FF 中实现此功能，您可以使用内联 svg 并定义一个 clipPath 以用作 url。确保将 clipPath 上的 clipPathUnits 属性设置为 objectBoundingBox，然后 clipPath 的内容使用元素的边界框。

这是一个例子。

body {
  margin: 0;
}

ul.wrapper {
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.wrapper > li {
  position: absolute;
  width: 100%;
}

img {
  width: 100%;
  height: auto;
}

.clip {
  -webkit-clip-path: polygon(25% 0, 100% 0%, 100% 100%, 75% 100%);
  clip-path: polygon(25% 0, 100% 0%, 100% 100%, 75% 100%);
  -webkit-clip-path: url("#clipping");
  clip-path: url("#clipping");
}

<ul class="wrapper">
  <li>
    <img src="http://placehold.it/512x288/3498db/f1f1f1" alt="">
  </li>
  <li>
    <img class="clip" src="http://placehold.it/512x288/e67e22/f1f1f1" alt="">
  </li>
</ul>

<svg width='0' height='0'>
  <defs>
    <clipPath id="clipping" clipPathUnits="objectBoundingBox">
      <polygon points="0.25 0, 1 0, 1 1, 0.75 1" />
    </clipPath>
  </defs>
</svg>

mozilla 的剪辑路径多边形不起作用

clip-path polygon for mozilla is not working

css

svg

mozilla