問題タブ [clip-path]

クリップ パスでインライン svg を使用して、コンテナーに面取りされたコーナー効果を実現しています。以下は私が現在使用しているコードです

私が直面している問題は、クリッピングに使用される svg シェイプがレスポンシブであることです。コンテナーのサイズが大きくなるにつれて、SVG 形状のサイズが大きくなるため、右下隅の面取りカットの長さも長くなります。

私が望むのは、clip-path プロパティが適用されるコンテナの寸法に関係なく、カットの長さが同じままであることです。

私のコードでは、座標系に従って相対的にポリゴンのポイントを指定します。ポイントをピクセル単位で絶対的に指定できることはわかっていますが、それは固定サイズの形状になり、svg 形状の寸法よりも大きいまたは小さいコンテナーに完全に収まらない場合があります。

カット寸法は同じままですが、全体のポリゴンサイズは反応するように、ポリゴンポイントに相対寸法と絶対寸法の両方を同時に持つことができるかどうかを調べる必要がありました。

現時点の

望ましい

編集以前にまったく同じ問題があるこの質問 を投稿しましたが、そこにある回答は私の要件を完全には満たしていません。この新しいスレッドを作成したのは、現在試している特定のソリューション (つまり、クリップ パス) についてより多くの助けを得たいからです。

clip-path を使用して div から円を切り取る方法を理解しようとしています。私はちょっと逆に動作するデモを作成しましたが、それは私が望むことを正確に行いません: http://jsfiddle.net/5eedebkn/2/

楕円を使用するときに、切り抜き領域を「挿入」するためのクリップパスを取得する方法を理解できませんでした。

したがって、白い部分が切り取られて、青と黒の部分だけが見えるようになります。切り抜いた部分を透明にしたいので、丸くしなければなりません。

SVG 要素を使用してかなり単純な形状を作成し、それを を使用して CSS に挿入しましたclip-path。角を丸くする必要がありますが、何らかの理由で角の1つだけが完全に効果を発揮します。

これは形です：

として使うとこうなります。clip-path

FireFox 内では完全に動作しているように見えますが、Chrome では右下隅を除いて角が正しくカットされていません。

次のように、ノード (d3.js 内) に循環クリップ パスを使用しています。

しかし、Firefox では、clipPath 要素内の circle 要素がノードの位置を (つまり、g 要素から) 継承しないため、画像が読み込まれません。

Chrome/Safari では、すべてがうまく機能し、コンソールを開いて clipPath 要素内にある circle 要素にカーソルを合わせると、正しい場所に円が明確に表示されます (半径が 42 であるため、84x84 の寸法で)。

しかし、Firefox では画像が表示されず、コンソールを使用して円の上にカーソルを合わせると、サイズが 0x0 の画面の左上に配置されていることがわかります。

ここで私が間違っていることはありますか？firefox の円の絶対位置を指定する必要がありますか、それとも g 要素から既に理解している必要がありますか?

SVG 画像を rect でクリップしましたが、そのクリップされた部分を onclick すると、画像ではなく rect で onclick イベントをトリガーする方法がわかりました。

これが私のコードです：

http://jsfiddle.net/dnuboz21/

ウィザード、

クリップパスでのマウスオーバー イベントに問題があります。何らかの理由でそれがトリガーされていません。要素が男の画像を切り取っているためだと思います。

私の目標は、ホバーされた要素のユーザー ID (例では 1、2、または 3 - 「ドット」テーブルの 4 番目の要素) を警告することです。

私はそれをjsfiddleにロードしました:

https://jsfiddle.net/vk1jc8ah/4/

誰かがそれを機能させることができますか、または同じ目標を達成する別の方法を提案できますか?

HTML:

JS:

私はそれをjsfiddleにロードしました:

https://jsfiddle.net/vk1jc8ah/4/

誰か助けてくれませんか？

あるセクションでクリップパスを使用し、まったく別のセクションで単純な Google マップを使用した Web ページがあります。

クリップ パスを使用した目的の効果は次のとおりです。

最初のセクションで使用される CSS は次のとおりです。

Google マップの CSS は次のとおりです。

ここで、CSS を使用してマップを非表示にするか、単にファイルからマップを削除すると、目的の効果が得られますが、マップが存在する場合、コードの動作がおかしくなり、リロードごとにクリッピング セクションのレンダリングが異なります。

でも、タブを切り替えて戻ってくると変わる。ややこのように:

またはこれ：

どんな助けでも大歓迎です！

PS私はどこにも黒い背景さえ持っていません。CSS は適切にリセットされます。

firefox の作業へのクリップ パスを取得できません。私が知る限り互換性はありますが、なぜ機能しないのか理解できず、私が知る限り、これはあまり一般的な問題ではありません. クロムで問題なく動作します。足りないものはありますか？