剪辑路径无法在Firefox中使用[％values]

我想在mozilla中运行svg剪辑路径，但它不起作用。剪辑路径无法在Firefox中使用[％values]

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

它在铬中完美工作。任何人都可以帮助我与Mozilla和其他浏览器？

来源

2015-11-20 user4821826

尝试使用'-moz-clip-path' – RockMyAlgorithm

我试过了，它不适用于 – user4821826

Firefox不支持'clip-path'。 _（我记得）_。 [This]（http://stackoverflow.com/questions/23740001/css-clip-path-doesnt-work-in-firefox）可能会帮助你。 – RockMyAlgorithm

您可以在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%, 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中没有支持。

来源

2015-11-20 12:37:24

我也为此付出了很多努力。我正在覆盖类似上面的答案，但我找到的解决方案是使用Style标签添加内联CSS。这很丑，但至少起作用。

<div class="clip-this" style="background:red; height: 200px; width: 200px;"></div> 
 

 
<!-- this lets Firefox display the angle --> 
 
<svg class="clip-svg"> 
 
\t <defs> 
 
\t \t <clipPath id="swipe__clip-path" clipPathUnits="objectBoundingBox"> 
 
\t \t \t <polygon points="0.404 0, 1 0, 1 1, 0 1" /> 
 
\t \t </clipPath> 
 
\t </defs> \t 
 
</svg> 
 

 
<style> 
 
    .clip-this { 
 
\t clip-path: polygon(40.4% 0, 100% 0, 100% 100%, 0 100%); 
 
\t clip-path: url("#swipe__clip-path"); 
 

 
} 
 
</style>

来源

2016-08-11 09:52:41 atomictom

这是唯一对我有用的东西！我永远不会猜到我需要将这个规则排除在CSS之外，进入HTML体。感谢您的提示 – oriadam

这对我有用！但我想添加一个css过渡到它？ – kach

除了@ atomictom的答案，我发现，如果你改变div的类的ID，那么你将不会有内联CSS

body{ 
 
    background: lightgreen; 
 
} 
 
#clip-this { 
 
    background:red; 
 
    height: 200px; 
 
    width: 200px; 
 
    clip-path: polygon(40.4% 0, 100% 0, 100% 100%, 0 100%); 
 
    clip-path: url("#swipe__clip-path"); 
 

 
}

<div id="clip-this"></div> 
 
    
 
    <!-- this lets Firefox display the angle --> 
 
    <svg class="clip-svg"> 
 
    \t <defs> 
 
    \t \t <clipPath id="swipe__clip-path" clipPathUnits="objectBoundingBox"> 
 
    \t \t \t <polygon points="0.404 0, 1 0, 1 1, 0 1" /> 
 
    \t \t </clipPath> 
 
    \t </defs> \t 
 
    </svg>

来源

2017-06-11 10:06:53 Jay

剪辑路径无法在Firefox中使用[％values]

回答

相关问题