剪輯路徑無法在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]

回答

相關問題