web-dev-qa-db-fra.com

Clip-path ne fonctionne pas dans firefox [% ​​values]

J'essaie de lancer svg clip-path dans mozilla mais cela ne fonctionne pas. 

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

Cela fonctionne parfaitement en chrome. Quelqu'un peut-il m'aider avec Mozilla et d'autres navigateurs?

htmlcsssvgclip-path
9
user4821826

Vous pouvez utiliser un fichier SVG en ligne (comme l'indique le code ci-dessous) dans Firefox, où vos points correspondent au pourcentage/100. En raison de l'attribut clipPathUnits, le masque sera réactif.

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

Reportez-vous au svg comme 

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

J'ai eu beaucoup de difficulté avec cela, car mon svg a été ajouté dynamiquement à la page. L'application de la propriété css de clip-path avec un délai (ou pageload) via js a résolu mes problèmes en FF. 

À ma connaissance, IE ne fournit aucun support.

12
Cyril Mestrom

J'ai aussi beaucoup lutté avec ça. Je couvre le même sujet que la réponse ci-dessus, mais une solution que j'ai trouvée consistait à ajouter le CSS en ligne à l'aide d'une balise Style. C'est moche, mais ça marche au moins.

<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

En plus de la réponse de @ atomictom, j'ai constaté que si vous modifiez la classe de la div en un identifiant, vous n'avez pas à insérer le CSS en ligne.

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