図形をパスでくり抜く（クリッピング）
SVGで図形をパスでくり抜く（クリッピング）するには、clipPath要素を使用します。
clipPath要素はdefs要素内で定義し、clipPathを割り当てる要素にclip-path属性を用いて定義したclipPath要素に付与されているid属性値をハッシュで指定することで割り当てることができます。
- ※ clipPath要素はパスのみを定義し塗などは割り当てても反映されず描画されません。
構文
<clipPath>
図形要素
</clipPath>属性
| 属性名 | 初期値 | 説明 |
|---|---|---|
| clipPathUnits | userSpaceOnUse | clipPath要素内で指定する座標等の扱い方。 指定可能な値は次の通り。 userSpaceOnUse ... clip-path属性で参照している要素の座標の計算と同じ方法。objectBoundingBox ... clip-path属性で参照している要素の親または先祖要素のビューポートを基準とした座標の計算と同じ方法。 |
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<clipPath id="sample">
<circle cx="90" cy="50" r="50" />
</clipPath>
</defs>
<g clip-path="url(#sample)">
<circle cx="50" cy="50" r="50" />
<circle cx="130" cy="50" r="50" />
</g>
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<clipPath clipPathUnits="objectBoundingBox" id="sample">
<circle cx="0.5" cy="0.5" r="0.5" />
</clipPath>
</defs>
<g clip-path="url(#sample)">
<circle cx="50" cy="50" r="50" />
<circle cx="130" cy="50" r="50" />
</g>
</svg>