問題タブ [clip-path]

Safari 9.1 で動作が見られますが、これは Safari のバグのようですが、コードの問題かどうかを確認するためにここに公開しています。

ユーザーの操作で CSS Shapes ポリゴン クリップ パスを移行するサイトがあります。Chrome 50 では問題なく動作しますが、Safari では動作しません。Safari では、別のプラグインが jQuery を使用して問題の要素の CSS 位置をチェックすると、クリップ パスの遷移が停止します。

この動作は、非常に最小限のコードペン(以下に再現) で確認できます。Safari では、緑色の三角形をクリックすると、ページ全体にアニメーションが表示されます。ただし、赤い三角形をクリックすると、唯一の違いは$().css('position'). Chrome では、両方の三角形が正常に機能します。

これを修正する方法はありますか？

HTML:

CSS:

JS:

マークアップに画像があります:

これは私のCSSです：

パーツを外せば使えfill-boxます。それで、私はそれを間違った方法で使用していますか？MDN の構文は次のようです。

プロパティへのリンク: https://developer.mozilla.org/en/docs/Web/CSS/clip-path

私はそれを正しく使用していませんか？何を変更する必要がありますか?

下端を少し下向きの矢印にするためにマスクを適用しているヒーロー画像（背景画像付きの全幅/高さ70％のdiv）があります。css クリップ パスとパーセンテージを使用して設定したので、さまざまなビューポート サイズで適切にスケーリングされます。

Chrome などの互換性のあるブラウザーでは期待どおりに動作しますが、もちろん Firefox では失敗します。Firefox が尊重することになっている url() 関数で使用する svg を作成しようとしています。しかし三振した。

私はsvgがパーセンテージを使用できないことを理解しているので、その間のすべてに0.0 = 0％、1.0 = 100％、および0.XXを使用しようとしましたが、うまくいかないようです。または、svgがヒーロー画像をカバーするようにスケーリングされていませんdiv。

これらのパーセンテージ ベースの css ポリゴンを Firefox で動作する svg に変換する方法はありますか? また、異なるビューポート間でスケーリングするためのトリックはありますか? （できればJSを追加する必要はなく、間違いなくjQueryなしで）

Firefox の欠点がページに悪い影響を与えるわけではありませんが、すべてのブラウザーで同じように下にスクロールを促すようにするとよいでしょう。

svg クリップパスにフィルターを適用したい。

ここに私のコードがあります、

何か案が？

やあ、

私はこのSVGファイルを持っています:

私のCSSコード:

要素は Firefox ではクリップされますが、Chrome ではクリップされません。何故ですか？

ありがとうございました。

やあ、

180x250px コンテナー用に作成された SVG 画像からのクリップ パスがあります。しかし、もっと大きな容器にも同じ形を使いたい。より大きなコンテナもカバーするように SVG を拡張することは可能ですか? または、新しいサイズに合わせてさらに別の svg 画像を作成する必要がありますか?

ありがとうございました。

半透明の PNG の背後に div を作成する必要があるプロジェクトに取り組んでいます。したがって、div を使用すると色を変更できますが、div は画像 (PNG) と一致するように異なる形状にする必要があります。

サンプル：

HTML Canvas、CSS shape、CSS Clip-path を試してみました。あるブラウザーのソリューションが他のブラウザーで機能せず、デスクトップ ビューのソリューションがモバイル ビューで機能しません。

添付ファイルに示されているように、すべてのブラウザーとすべてのデバイス (レスポンシブ) で機能するはずの div をトリミングするソリューションを探しています。

皆さんありがとう