क्लिप-पथ फ़ायरफ़ॉक्स में काम नहीं करता है [% मान]

Question

मैं मोज़िला में 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%); 
} 

यह क्रोम में पूरी तरह से काम करता है। क्या कोई मुझे मोज़िला और अन्य ब्राउज़रों के साथ मदद कर सकता है?

Answer 1

आप फ़ायरफ़ॉक्स में एक इनलाइन एसवीजी (नीचे दिए गए कोड के रूप में) का उपयोग कर सकते हैं, जहां आपके अंक प्रतिशत/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> 

तरह

.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 गतिशील पेज को जोड़ा गया है svg का संदर्भ लें। जेएस के माध्यम से क्लिप-पथ सीएसएस-प्रॉपर्टी को देरी (या पेजेलोड) के साथ लागू करने से एफएफ में मेरी समस्याएं हल हो गईं।

आईई में मेरे ज्ञान से कोई समर्थन नहीं है।

Answer 2

मैंने इसके साथ भी बहुत कुछ संघर्ष किया है। मैं उपरोक्त उत्तर के समान जमीन को कवर कर रहा हूं, लेकिन मुझे मिला एक समाधान स्टाइल टैग का उपयोग कर सीएसएस इनलाइन जोड़ना था। यह बदसूरत है, लेकिन कम से कम काम करता है।

<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>

Answer 3

@ atomictom के जवाब के अलावा मैं ने पाया है कि उसके बाद आप सीएसएस

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>

इनलाइन नहीं होगा यदि आप एक आईडी के लिए div के वर्ग बदलने