【SVG】クリッピング

SVGのクリッピングについて書きます。クリッピングは、切り抜きのことです。要素の一部分を切り抜きます。切り抜かれた部分は表示され、その他の部分は表示されません。切り抜く形は、色々と指定できます。

クリッピングパスの定義

切り抜く形を定義します。ここでは、楕円形(ellipse)にします。

<clipPath id="ellipseclip">
  <ellipse cx="0" cy="0" rx="150" ry="150" style="fill: #ffffff"/>
</clipPath>

クリッピングパスの適用

切り抜かれる要素を用意して、切り抜く形を適用します。

<g clip-path="url(#ellipseclip)">
  <rect x="0" y="0" width="200" height="200" fill="green"/>
</g>

コード

<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<clipPath id="ellipseclip">
  <ellipse cx="0" cy="0" rx="150" ry="150" style="fill: #ffffff"/>
</clipPath>
<g clip-path="url(#ellipseclip)">
  <rect x="0" y="0" width="200" height="200" fill="green"/>
  <rect x="50" y="50" width="200" height="200" fill="blue"/>
</g>
</svg>

デモ

以下は、上記のコードの実行例です。2つの四角形を円の4分の1で切り抜いています。クリッピングパス内が表示され、クリッピングパス外は表示されないことが、確認できると思います。

まとめ

• クリッピングパスの定義
• クリッピングパスの適用

以上を指定すると要素を任意の形に切り抜くことができます。