SVGエッセンシャルズ 第2版

10章クリッピングとマスキング

画像全体ではなく、画像の一部だけを表示したい場合があります。たとえば、双眼鏡や鍵穴を通して見ているかのように画像を描画したい場合などです。この場合、接眼レンズや鍵穴の境界線の外側にあるものは、いっさい見えません。あるいはまた、半透明のカーテンを通して見ているかのように画像を表示することで、雰囲気を表現したい場合もあるでしょう。SVGでは、クリッピング（clipping）やマスキング（masking）によって、これらの効果を実現できます。

10.1　パスに従うクリッピング

SVG文書を作成する場合、あなたが関心を抱いている領域の幅と高さを指定することで、ビューポートを設定します。デフォルトでは、これがクリッピング領域になります。クリッピングとは、「切り抜き」や「切り取り」といった意味です。つまり、この領域の境界線の外側に描かれたものは、いっさい表示されません†1。<clipPath>要素を使うと、クリッピング領域を自由に設定できます。

[†1] overflowスタイルプロパティをvisibleに設定することで、この動作を変更できます。

最も簡単なケースを次に示します。つまり、矩形のクリッピングパスを定義して、クリッピング領域を設定します。このためには、クリッピングパスを表す<clipPath>要素の中に、矩形（<rect>）を置きます。この矩形に従ってクリッピングが行われます。矩形そのものは表示されず、その座標が重要になります。<clipPath>内の要素には、塗りつぶしやストロークのスタイルを自由に追加できます。一方、クリッピングされるオブジェクト側では、clip-pathスタイルプロパティを追加し、<clipPath>要素を参照するように設定します。 ...