html – Clip-path在firefox中不起作用[％values]

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

您可以在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

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

我很广泛地努力,因为我的svg动态添加到页面.通过js应用具有延迟(或pageload)的剪辑路径css属性解决了我在FF中的问题.

我的知识没有IE的支持.