Raphaël.jsのクリップパス

Question

このようなRaphaël.jsでクリップパスを使用するにはどうすればいいですか？exampleそれはRaphael.jsがクリップインするだけの縫い目です。

Answer 1

パス描画された図形で穴を開けることができます。 これはドーナツの穴として知られている技術であり、これはそれが私のサイトのインデックスは、それがために使用 http://www.irunmywebsite.com/ Errはある 情報データベースと技術ラベルされたドーナツの穴を参照してください ない難しいようであれば、あなたは私のインデックスページ の例を見ることができますさあ。 今、あなたは（カルーセルとサムネイルホルダーはただ一つのパス... See the Raphael Crousel

私は以下が含まはるかに良い例です }いくつかの穴を通って景色を見て想像してみてください。中央青色領域の複数のクリップパスを見つけることができますこれは、多目的使用を持っている。それにカットし、いくつかの穴があります。 それは私がDOM/SVGのハイブリッドソリューションと呼ぶものの一部です。

Cut multi purpose holes for a variety of reasons

Answer 2

私はあなたがラファエルを介して行うことはできないと思います。 DOMを直接操作することでそれを行うことができますが、その要素に対してRaphaelメソッドを呼び出す能力が失われます。

IEがSVGをサポートするようになりました。プレーンなjavascriptやSVGの仕様でもっと多くのことができます。

Answer 3

例の画像のように、それはラスタイメージ（だ、場合png,gif,jpg ...ビットマップピクセルイメージ）をクリップすると、実際にはとても簡単です。 Raphael 2では、塗りつぶしをイメージファイルを指すように設定します。それは背景イメージとしてそれを使用します。

画像ファイルのクリッピングマスクやクリップパスのようなRaphaelのパスまたはシェイプを使用して画像や写真をトリミングする場合は、その画像をパスの塗りつぶしとして設定します。

somepath.attr({fill: 'someimage.png'});

制限（私の知る限り）：背景の位置等

観光「はARENパス当たり

• つのみ画像
• 画像ごとに1つのパス（複合マスクの使用化合物のパス）簡単 - see this question for more
• イメージの繰り返しを止めることは不可能だと思います。