web-dev-qa-db-ja.com

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

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

chromeで完全に機能します。誰でもmozillaや他のブラウザで手伝ってくれる？

htmlcsssvgclip-path
9
user4821826

ポイントはパーセンテージ/ 100ですが、FirefoxではインラインSVGを使用できます（以下のコードを参照）。属性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>

のような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が動的にページに追加されたので、私はこれに広範囲に苦労しました。 jsを介してクリップパスcss-propertyに遅延（またはページロード）を適用すると、FFでの問題が解決しました。

IEは私の知る限りではサポートされていません。

12
Cyril Mestrom

私もこれで多くの苦労しました。上記の回答と同様の根拠をカバーしていますが、解決策は、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>
4
atomictom

@atomictomの回答に加えて、divのクラスをidに変更すると、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");

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