it-swarm.com.de

Clip-Pfad funktioniert nicht in Firefox [% ​​-Werte]

Ich versuche, svg clip-path in Mozilla auszuführen, aber es funktioniert nicht. 

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

Es funktioniert perfekt in Chrom. Kann mir jemand mit Mozilla und anderen Browsern helfen?

9
user4821826

In Firefox können Sie eine Inline-SVG (wie der folgende Code zeigt) verwenden, wobei Ihre Punkte der Prozentsatz/100 sind. Aufgrund des Attributs clipPathUnits reagiert die Maske auf Reaktion.

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

Beziehen Sie sich auf die SVG wie 

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

Ich hatte lange Probleme damit, da mein svg dynamisch zur Seite hinzugefügt wurde. Das Anwenden der Clip-Pfad-Eigenschaft css mit Verzögerung (oder Seitenaufruf) über js löste meine Probleme in FF. 

Es gibt keine Unterstützung in IE durch mein Wissen.

12
Cyril Mestrom

Ich habe auch viel damit zu kämpfen. Ich habe ähnliche Gründe wie die obige Antwort, aber eine Lösung, die ich gefunden habe, war das CSS-Inline-Element mit einem Style-Tag hinzuzufügen. Es ist hässlich, funktioniert aber zumindest.

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

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

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

}
</style>

4
atomictom

Neben der Antwort von @ atomictom habe ich herausgefunden, dass, wenn Sie die Klasse div in eine id ändern, das CSS nicht inline eingefügt werden muss

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">
    	<defs>
    		<clipPath id="swipe__clip-path" clipPathUnits="objectBoundingBox">
    			<polygon points="0.404 0, 1 0, 1 1, 0 1" />
    		</clipPath>
    	</defs>	
    </svg>

0
Jay