SVG 教程

SVG要素

SVG <clippath> 剪切パス

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

クリップパスの例

これは簡単なクリップパスの例です：

例

<svg　width="200"　高さ="100"　スタイル="ボーダー:　1px　solid　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath">
　　　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle　cx="25"　cy="25"　r="20"　スタイル="フィル：#0000ff;　クリップ-path:　url(#clipPath);　"></circle>
</svg>
<svg　width="200"　高さ="100"　スタイル="ボーダー:　1px　solid　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath2">
　　　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle　cx="25"　cy="25"　r="20"　スタイル="フィル：#0000ff;　クリップ-path:　url(#clipPath2);　"></circle>
　　　　<rect　x="15"　y="15"　width="40"　height="40"　スタイル="ストローク:　#000000;　フィル：なし;"></rect>
</svg>

テストをしてみて‹/›

この例では、矩形に似た形状(<clipPath>要素内の形状)のクリップパスを定義しています。最後に定義された円はCSS属性clip-pathは<clipPath>のid属性を参照しています。

左下は生成された画像です。右側は同じ画像ですが、クリップパスも描かれています。

注意してください、クリップパス内では円の部分のみが見えます。残りの部分はカットされます。

高度なクリップパス

矩形以外の他の形状もクリップパスとして使用できます。円、楕円、多角形、またはカスタムパスを使用できます。どのSVG形状もクリップパスとして使用できます。

これは<path>要素をクリップパスとして使用する例です。これらは使用できる最高のクリップパスタイプです。クリップパスは<rect>要素に適用されます。

例

<svg　width="200"　高さ="100"　スタイル="ボーダー:　1px　solid　#cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　スタイル="ストローク:　なし;　フィル：#00ff00;　"></rect>
</svg>
<svg　width="200"　高さ="100"　スタイル="ボーダー:　1px　solid　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath3">
　　　　　　　　　　　　<path　d="M10,10　q60,60　100,0　q50,50　50,50,0　l40,0　l-40,40,0　l-100,-20"></path>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<rect　x="5"　y="5"　width="190"　height="90"　スタイル="ストローク:　なし;　フィル：#00ff00;　クリップ-path:　url(#clipPath3);"></rect>
</svg>

テストをしてみて‹/›

生成された画像です-右側にあります。左側はクリップパスが無い画像を表示しています。

グループのクリップパス

SVG形状のグループに対してクリップパスを使用することができます。各形状ごとにクリップパスを使用するのではなく、形状を<g>要素内に配置し、<g>要素にCSS属性clipを設定するだけで済みます。-pathを使用して。以下はその例です：

例

<svg　width="200"　高さ="100"　スタイル="ボーダー:　1px　solid　#cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　スタイル="ストローク:　なし;　フィル：#00ff00;　"></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg　width="200"　高さ="100"　スタイル="ボーダー:　1px　solid　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath4">
　　　　　　　　　　　　<rect　x="10"　y="20"　幅="100"　height="20"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-path:　url(#clipPath4);">
　　　　　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;"></rect>
　　　　　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
　　　　</g>
</svg>

テストをしてみて‹/›

以下はクリップパスが無い画像です。それからクリップパスが適用された画像です：

テキストクリップパス

テキストをクリップパスとして使用することもできます。以下はその例です：

例

<svg　width="200"　高さ="100"　スタイル="ボーダー:　1px　solid　#cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　スタイル="ストローク:　なし;　フィル：#00ff00;　"></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg　width="200"　高さ="100"　スタイル="ボーダー:　1px　solid　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath5">
　　　　　　　　　　　　<text　x="10"　y="20"　スタイル="フォント-サイズ:　20px;　">
　　　　　　　　　　　　　　　　これはテキストです
　　　　　　　　　　　　</text>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-path:　url(#clipPath5);">
　　　　　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;"></rect>
　　　　　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
　　　　</g>
</svg>

テストをしてみて‹/›

これはカットパスを含むか含まないかの結果画像です：

ご覧の通り、現在はテキスト内部の形状の一部のみが表示されています。

SVG <filter> フィルタ SVG 参考マニュアル