2012-01-20 3 views
1

すべて、パス(この親を呼び出すことができます)を使って、&を別のオブジェクトにドラッグすることができます。Raphaelでクリップパスを使用する複数の要素

objを隠すためにclip-pathを使用しています。つまり、親シェイプの境界を超えている場合は非表示になります。

親の形の中で、&ドロップobjをドラッグすることができます。我々はこれらのobjを埋める。画像付き。画像がobjより大きい場合objの外側の画像の一部。境界も隠されています(Raphaelのクリップ・レット)。

残念ながら、Raphaelは複数のクリップパスのように見えません。&これは競合します。つまり、objです。画像が内部にある場合、そのクリップパス機能が親シェイプのクリップパスで上書きされます。画像はobjの境界の外側で見えるようになります。

編集:ここに私たちがしたいことのイラストがあります。これがイラストでさらに説明されることを願っています。私はこのための部分的な解決策を持っているかもしれないと思う... あなたはそれが関連する私のウェブサイト上のインデックスに私のウェブサイト

外出先で私にフィードバックを送って、「思想クラウド」 をご覧ください見つけた場合enter image description here

+0

黄色の矩形にクリップ・レットを使用し、大きな黒い背景にドーナツ・ホールを使用できますか?そうすれば、一度クリップ・レットを使うことができますか? – Chasbeen

+0

@Chasbeen、しかし、それは私たちのWebアプリケーションで動作しませんでした。あなたの答えを下に詳しく返信しています。 – Kayote

答えて

1

それは、より大きな経路領域を通る穴を切断する「思考雲」を伴う大きな経路領域からなる。

私のサイトは/ 複数のクリップパスはできるだけだけで

http://www.irunmywebsite.com/

/UPDATE 8TH 2013年4月であるラファエル シングルクリップパスの例では、単一のクリップパスとして(同じ原理を使用します) Donut hole 複数のクリップパス例 Here we clip 9 images twice! The clip path overlay makes the images have rounded corners これは、この返信をiPodに書式設定して、綴りや他のものが少しずれている可能性があることを願っています。

+0

@chasbeenありがとう、私たちはあなたのサイト(SVGだったとき)のファンだったし、多くを学んだ。しかし、私たちは「思考雲」を見ていますが、この右を読んでいると、クリップパスの外にシンプルなクリップパス隠蔽領域があるようです。私はオリジナルのポストのイラストをさらに描くために図面を投稿します。 – Kayote

+0

これは同じ原理です:www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=donutholes中央の形がちょうど円です。内側の図形に正しい方向のパス定義があることを確認してください – Chasbeen

+1

今、ドーナツ穴の意味を理解しています。残念なことに、我々はそれを考慮した&それは動作しません。我々のアプリケーションでは、ユーザーはドーナツ形状の外にアイテムを容易に拡張できるように、表示されているアイテムを変更することができます。何が起こるかの例としてこのイメージを見てください。 http://imgur.com/H8IYF – Kayote

関連する問題