Clip-Pfad funktioniert nicht in firefox [%- Werte]

Ich versuche zu laufen svg-clip-Pfad in mozilla, 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%);
}

Funktioniert es in chrome perfekt. Kann jemand mir helfen können mit mozilla und anderen Browsern?

  • Versuchen Sie es mit -moz-clip-path
  • Ich habe versucht, es nicht so gut funktionieren
  • Firefox unterstützt nicht clip-path. (Ich erinnerte mich an). Dieser kann Ihnen dabei helfen.
  • Eigentlich FF hat derzeit nur Unterstützung von CSS clip-Pfad von svg mit url([svgFile.svg]#element)
  • unterstützt es % - Werte?
  • Ich weiß nicht, warum in der Welt von ff nicht unterstützt clip-Pfad,..,, weil dieser, viele haters die entstehen würden, gegen ff, und natürlich bewegen Sie sich zu anderen Browsern.. die Milliarden der Völker " heißen-Thema seit einem Jahrzehnt gibt es den clip-Pfad-Unterstützung in ff. hey ff-Entwickler sind Sie, die hartherzig?

InformationsquelleAutor user4821826 | 2015-11-20
  1. 12

    Können Sie eine inline-SVG (wie der code unten zeigt) im Firefox, wo Ihre Punkte sind der Prozentsatz /100. Aufgrund des Attributs clipPathUnits die Maske wird reagiert.

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

    Kämpfte ich mich ausführlich mit diesem, seit meiner svg wurde dynamisch auf der Seite Hinzugefügt. Die Anwendung der clip-Pfad der css-Eigenschaft mit einer Verzögerung (oder automatisch) per js gelöst meine Probleme im FF.

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

    InformationsquelleAutor Cyril Mestrom
  2. 4

    Hab auch ich kämpfte sehr mit dieser. Ich bin abdecken ähnlichen Boden wie in der obigen Antwort, aber eine Lösung, die ich fand, war das hinzufügen der CSS inline mit einem Style-tag. Es ist hässlich, aber funktioniert zumindest.

    HTML:

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

    • Dies ist die einzige Sache, die für mich gearbeitet! Ich hätte nie gedacht, dass ich brauchen, um die Regel aus der css und in der html-Körper. Danke für den Tipp
    • Dieser arbeitete für mich ! aber ich will hinzufügen einer css-übergang ?
    InformationsquelleAutor atomictom
  3. 0

    Zusätzlich zu @atomictom die Antwort ich habe herausgefunden, dass wenn Sie ändern die div ' s Klasse, um eine id, dann werden Sie nicht haben, um inline-CSS

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

}

    HTML:

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

    InformationsquelleAutor Jay
Schreibe einen Kommentar