剪辑路径不工作在firefox [％值] [英] Clip-path doesn't work in firefox [% values]

问题描述

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

I am trying to run svg clip-path in mozilla but it doesn't work.

.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%);
}

推荐答案

您可以使用内联SVG（如下面的代码所示）在Firefox中，你的点是百分比/ 100。因为 clipPathUnits 属性的掩码会响应。

You can use an inline SVG (as the code below shows) in Firefox, where your points are the percentage / 100. Because of the attribute clipPathUnits the mask will be responsive.

<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

Refer to the 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应用剪辑路径css属性与延迟（或页面加载）解决了我的问题在FF。

I struggled extensively with this, since my svg was dynamically added to the page. Applying the clip-path css-property with a delay (or pageload) via js solved my problems in FF.

我知道在IE中没有支持。

There is no support in IE by my knowledge.

这篇关于剪辑路径不工作在firefox [％值]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！