html - クリップ パスが Firefox で機能しない [% 値]

Question

mozilla で svg clip-path を実行しようとしていますが、うまくいきません。

.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 やその他のブラウザーで私を助けることができますか?

Answer 1

私もこれでかなり苦労しました。上記の回答と同様の根拠をカバーしていますが、私が見つけた解決策は、Style タグを使用してインラインで CSS を追加することでした。醜いですが、少なくとも機能します。

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