SVGチュートリアル

SVG要素

SVG<clipPath>要素

SVG <clipPath>要素は、特定のパスに基づいてSVG形状をカットアウトするために使用されます。SVGカットアウトとも呼ばれます。パス内の形状部分は見えるですが、外側の部分は見えません。

オンラインの例も多く

以下の例では、clipPathを使用して青い扇形を描画しています。

例

<svg height="450" width="450">
　　<defs>
　　　　　　<clipPath id="clip">
　　　　　　　　　　<rect x="15" y="15" width="40" height="40"　/>
　　　　　　</clipPath>
　　</defs>
　　<circle　cx="25" cy="25"　r="30"
　　　　　　　　　　style="fill: #0000ff; clip-path: url(#clip); "　/>
</svg>

試してみる‹/›

以下の結果が得られます:

使用方法の説明

今、クリップパス内の円形部分が見える残りの部分がカットオフされていることがわかります。
<clipPath>要素のid属性は、クリップパスのユニークな名前を定義します。

オンラインの例も多く

以下の例では、clipPathを使用して爱心の図形を描画しています:

例

<style>
svg{width:40%;height:30%}
@keyframes openYourHeart {from {r: 0} to {r:　60px}}
#myClip circle {
　　animation: openYourHeart　15s infinite;
}
</style>
<svg viewBox="0 0　100　100">
　　<clipPath id="myClip">
　　　　<!--
　　　　　　円の外側にあるすべてのものはカットオフされ、そのため見えません。
　　　　-->
　　　　<circle　cx="40"　cy="35"　r="35></circle>
　　</clipPath>
　
　　<!--　参照要素（英語原文：for　reference）としての黒い心形　-->
　　<path　id="heart"　d="M10,30　A20,20,0,0,1,50,30　A20,20,0,0,1,90,30　Q90,60,50,90　Q10,60,10,30　Z"></path>
　
　　<!--
　　　　黒い心形の中に位置する赤い円の一部だけが見える；
　　　　円が大きくなると、次第に赤い心形になる。
　　-->
　　<use　clip-path="url(#myClip)"　xlink:href="#heart"　fill="red"></use>
</svg>

テストをしてみる ‹/›

実行後の効果は以下の通り:

SVG<mask>要素 SVG<pattern>要素