html - 剪辑路径在 Firefox 中不起作用 [% 值]

Question

我试图在 mozilla 中运行 svg clip-path 但它不起作用。

.mask-1 {
    -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
    clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
}

它在 chrome 中完美运行。谁能帮我解决 mozilla 和其他浏览器的问题？

Answer 1

您可以在 Firefox 中使用内联 SVG(如下面的代码所示)，其中您的分数是百分比/100。由于 clipPathUnits 属性，掩码将响应。

<svg width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 0.58 0, 0.39 0.818, 0 0.818" />
    </clipPath>
  </defs>
</svg>

引用svg like

.mask-1 {
   -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
   clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
   -webkit-clip-path: url("#clip-shape"); 
   clip-path: url("#clip-shape");
}

我为此苦苦挣扎，因为我的 svg 是动态添加到页面的。通过 js 延迟(或页面加载)应用 clip-path css-property 解决了我在 FF 中的问题。

据我所知，IE 不支持。