問題タブ [clip-path]

How do I superimpose one SVG image on another using Apache Batik?の指示に従いました (他のソースからの追加の詳細を含む) 。

今まで、ほとんどの場合、物事は完璧に機能しています。しかし、今では、個々の svg ドキュメント (画像) のそれぞれにクリップ パスがあります。2 つ以上の画像を配置すると、2 番目のパスのみが出力に保存されます。他のすべてのクリップ パスが失われます。各画像のクリップ パスを保持するために必要なことはありますか? SVG 出力を確認したところ、クリップ パスが 1 つしか表示されませんでした。私のコードは次のようになります。

次に、標準コードを使用して SVGC.SVGD を表示します。

任意の洞察をいただければ幸いです。

CSS サークル ローダーを作成しようとしていますが、約 90% の作業が完了しています。

現在、.loader クラスのデータ属性 data-progress が進行状況を制御するようにしています。すべてが機能しますが、進行状況がアニメーション化されると、アニメーションのマスクが解除され、アニメーションが終了するとすぐに再びマスクされます。なぜこれが起こっているのか理解できないようです。

これまでに私が持っているものを見るためのJSビンへのリンクがあります。これに対する考えや解決策を聞きたいです。助けてくれてありがとう！

http://jsbin.com/sofiho/edit?html,css,js,output

コード スニペットを追加していないことをお詫びします。ここにあります：

HTML:

SCSS:

ビデオの別のインスタンスの上にオーバーレイされたテキストのビデオマスクを取得しようとしています。私はFFで望ましい効果を達成しました:

上にオーバーレイされる同じビデオのインスタンスをマスキングするテキスト オーバーレイ。これを行うには、次のコードを使用しました。

Chrome では、マスキングなしで 2 つの動画を重ねて表示するだけです。理由、または回避策があるかどうか、何か考えはありますか?

SVG ベースのグラフがあります。上部には、画像に示すように、ユーザーがグラフ内を移動できるスクロール可能な領域があります。

左/右のいずれかのタブをドラッグすることにより、ユーザーは図に示すように、プロットの特定の部分を拡大できます。

グラフの選択された部分だけが青色で、灰色で強調表示されていることに注意してください。青とハイライトはどちらも変更されていませんが、クリッピング マスクを使用してクリッピングされています。

と

そして、これはすべてうまく機能します。タブをドラッグすると、クリップ パスは問題なく機能します。その場合、タブがスライドするにつれて、段階的に変更されます。

しかし、私は以下を呼び出すリセットボタンを持っています:

これを実行すると、結果は次のようになります。

タブ グループは本来あるべき場所に正確に戻りますが、クリップ パスは元の幅と x 位置に部分的にしか戻っていないように見えます。

しかし、これは当てはまりません

ページ ソースを表示し、clippathrectオブジェクトにカーソルを合わせると、次のように表示されます。

つまり、rectオブジェクト DID のサイズが変更されて元の位置に移動したことを示していますが、正しく表示されていません。最初の 2 つの画像のように、いずれかのタブを移動すると、すぐにクリップパスが正常に機能するように戻ります。

なぜこうなった？右のタブが移動された場合でも、左のタブが移動された場合でも、両方が移動された場合でも発生します。タブが少しだけ動かされた場合、大きな問題はないように見えますが、タブがさらに移動するにつれて明らかなグリッチ/エラーが増加します。

同様の関数はクリップパスに対して同じattr変更を行いますが、常にパスの長さを短くします。この不具合は、長さを長くしたときにのみ発生しているようです。

グラフ内の他の多くの要素に対して同じタイプの操作を使用していますが、すべて正常に動作します。すべてが jQuery 表記法​​ (つまり$('#element')) で参照されます。

d3 やその他のライブラリの使用には興味がありません。jQuery または純粋な JS ソリューションのみを探しています。

編集1

私も試してみました

成功しませんでした。変更は段階的に行われていますが、サイコロはまだありません。以前と同じように見えます。このクリッピングの問題は Safari でのみ発生しており、FireFox では問題ないようです。他の人をテストしていません。

ワーキングソリューション（ハッキング）

クリップパス内で を定義するときrectに、幅のプロパティを変更しました。上記のものから次のように変更しました。

そして、次の 2 つの操作を適用すると、clippath 機能が適切に動作します。

これらのいずれかを削除すると、機能しなくなります。理由はわかりませんが、より良いものが登場するまでの一時的な修正である必要があります。回答は引き続き大歓迎です！

注: これは、以前のユーザーによって提起された問題と同じです (ただし、問題の解決策はありませんでした)。

localhost から Chrome で実行している Web ページの画像にクリップパスを適用すると、最初のオブジェクトでのみ機能します。残りのイメージ (オブジェクト) は完全に消えます。ただし、 jsfiddleを実行すると、同じコードが正常に機能します。CSSは次のとおりです。

このjsfiddleは、私の Web ページで使用されているものとまったく同じコードを使用した問題のデモです。3 つの同一の div が表示され、円のクリップパスが 4 つの画像すべてで機能します。私は最初の提出者に彼の評価を尋ねた.

それでも、最新バージョンの Chrome を使用していますが、ローカルホストから実行すると問題が発生します。これを回避する方法はありますか？

SVG clipPath を使用してクリップされた画像があります。ただし、画像がclipPath内で水平方向と垂直方向に中央揃えになるようにしたいと思います。

これを行う方法はありますか？

http://codepen.io/aguerrero/pen/LGqMVq

数日間、私は問題に苦しんでいます: SVG クリップパスを作成しましたが、曲線のコーナーを追加したいと思います。'Curvetto' の 'C' をコードに追加すると、右側の角だけが丸くなります。

これは私のコードです：

私のクリップパスの画像

両方の角を曲げるにはどうすればよいですか?

現在、複数のサーフェス ビューと、単一のビューの 1 つをクリッピングして円として表示することに問題があります。それは画像で最もよく説明されています：

したがって、このビューでは、カメラのプレビューを表示しているフルスクリーンビューと、MediaPlayer でファイルを再生しているトップビューの 2 つのサーフェスビューがあります。次の行を使用して、一番上のものをプレビューの上に配置しました。

ご覧のとおり、次のコードでこれを円にマスクしようとしました:

しかし、なかなかうまくいかなかったようです。最初はこれはマスキング コードの問題だと思っていましたが、次の画像のようにプレビュー サーフェス ビューを削除すると、マスキングが正常に機能することがわかりました。

なぜこれが発生しているのか、またはそれを修正する方法について、誰にもアイデアがあります:S?

ご協力いただきありがとうございます