問題タブ [clip-path]

clipCSSとclip-pathプロパティを使用して、単一ページの Web サイト レイアウトのフローティング ページャー ナビゲーションを表示しようとしています。背景が暗いか明るいかに基づいて、ナビゲーションの色を変更しようとしています。http://dannymcgee.net/redesignで、意図した結果を Firefox で確認できます。また、トラブルシューティングの目的で、 http: //dannymcgee.net/dev/clipnav-prototype/ で、ナビゲーションとコンテナーをよりクリーンで軽量なコードで複製しました。

これは、異なる背景色を持つ各セクションのマークアップの構造です。

section背景が変わるたびにこの全体が繰り返されます。それぞれsectionが相対的に配置されています。は次の.clipperようにスタイル設定されています。

クリッパーの.nav内側はposition: fixed、ページの上部からあり、 がありますbackface-visibility: hidden。

この効果は基本的に Firefox で希望どおりに動作しますが、Chrome と IE ではバグがあります。Chrome では、背景画像が奇妙に動作し、ナビゲーションは最初のセクションを過ぎると操作できなくなります。IE では、ナビゲーションは最初のセクションを過ぎてまったく表示されません。私はこれとまったく同じ設定が Chrome と IE で正しく動作しているのを見てきました(実際、私はコメントできない古い StackOverflow スレッドのリンクを見つけました)。彼らは違ったやり方をしています。何らかの shim Javascript または jQuery ソリューションを見つけることができれば、それを使用してかなり満足できますが、これは非常に珍しいケースのシナリオのようで、どこから調べればよいかさえわかりません。

タイトルを適切に定式化したかどうかはわかりませんが、ここで質問します。

プロパティを使用して CSS で使用したい雲のような形状の SVG パスがありclip-pathます。

HTML に SVG 要素を追加し、<clipPath>そのパスで定義すると、ブラウザーはクリッピング パスを左上隅に配置します。クリップされた要素にマージンを適用すると、マスクはリンクされず、最初の位置にとどまります。

他の同様のスレッドは、clipPathUnits="objectBoundingBox"属性をオブジェクトに追加する必要があると<clipPath>述べていますが、それは私の問題を解決していないようです。パスを絶対パスから相対パスに変換して、そのように試してみましたが、同じ結果が得られました。

クリップされた要素に配置が適用されると、クリッピング パスも移動するように、クリッピング パスをクリップされた要素と何らかの方法でリンクすることは可能ですか?

役立つ場合は、相対パスを次に示します。

いくつかのテスト HTML/CSS と同様に。(クリッピングの問題が発生するのを確認できるように、leftプロパティを に設定しました)10px

svg要素で移動するsvgクリップパスを取得しようとしていますが、2つが接続されているようです。私は基本的にマウスの可動クリップを作成しようとしていますが、すべて JavaScript で実装する必要があります。どうしたの？

https://jsfiddle.net/9n414sxs/

ページの HTML 要素の 1 つに適用された SVG クリップ パスを使用している Web ページがあります。

SVG 要素:

クリッピング パスが適用される HTML 要素

<div id="clipMe"> </div>

クリップを定義する CSS

同じページにさまざまな要素があり、そのうちのいくつかは相対的に配置されています。

#clipMeSafari (8.0.4) のみで、 div から clipPath (SVG 要素内) へのリンクが損なわれていない限り、これらの相対的に配置された要素は表示されません。

FF と Chrome の最新バージョンは期待どおりに表示されます。

position:プロパティを相対以外のものに変更すると、すべてが期待どおりに表示されます。

クリッピング パスを無効にすると (SVG 要素をまとめて削除するかclip-path:、CSS からプロパティを削除して)、期待どおりにすべてが表示されます。

JSfiddle:

繰り返しますが、これは Safari のみです。それをSVGクリッピングパスに切り分けるのにしばらく時間がかかったposition: relativeので、同様の結果が得られる他の状況があると推測しています。

誰かがこれに遭遇したり、相対的に配置された s を表示するための提案はありますか?

編集
これはMacのものかもしれません。OSX の Chrome と Firefox では期待どおりに表示されますが、iOS のどのブラウザーでも相対的に配置された DIV は表示されません。

何か案は？

SVG clipPath を定義し、それをページのいくつかの DIV に適用しています。FF では期待どおりに動作/表示されますが、Chrome と Safari (すべての最新バージョン) では、HTML 要素がページの左上隅に配置されている場合にのみ、clipPath が HTML 要素に影響を与えるようです。

SVG オブジェクト

切り取る要素のCSS

JSFIDDLE

この記事では、座標系を使用してこれに対処し始めていると思いますが、何度かすぐに迷子になったり混乱したりしました。さまざまな測定単位と座標を使用すると、clipPath を任意の HTML 要素に適用できると言っているように聞こえますが、よくわかりません。

Illustrator から clipPath をエクスポートしたので、使用する必要がある別の単位/座標があった場合、どうすればよいかわかりません。

Chrome および/または Safari で、ページの左上以外の場所にある HTML 要素に SVG clipPath (実際のパスであり、ポリゴンや楕円ではない) を正常に適用した人はいますか?

私はdygraphsを使用して、Androidで範囲セレクターダイアグラムを印刷しています。私の問題は、グラフがダイアグラム div の最後を超えていることです。これは、次の図で確認できます。

icanuse とさまざまな Web サイトでは、Android は 3.0 までクリップパスをサポートしていたと言われています。それ以来、clip-path はサポートされていません (Android 5 を搭載した LG G3 でもテストしました)。

私の質問:グラフのクリッピングを防ぐための回避策はありますか? または、私がテストできるいくつかのアイデアがありますか?

関連リンク：

https://code.google.com/p/dygraphs/issues/detail?id=200

http://dygraphs.com/tests/range-selector.html

https://github.com/danvk/dygraphs/commit/971870e5232350812bf91dc7b555332a8993efda