SVG 教程

SVG要素

SVG <Animation> アニメーション要素 SVG <clipPath> 要素

SVG <mask> 要素

SVGマスク機能を使用して、マスクをSVG形状に適用できます。SVGマスクは、SVG形状のどの部分が可視か、どの透明度を持つかを決定するより高度な剪切パスのバージョンです。

SVGでは、透明なマスクレイヤーを現在のオブジェクトと合成して背景を作成できます。透明なマスクレイヤーは、他のグラフィックオブジェクトや<g>要素のいずれでもできます。mask要素は、このようなマスク要素を定義するために使用されます。属性maskは、マスク要素を参照するために使用されます。

オンラインサンプル

青色の矩形マスクを作成します

サンプル

<svg　height="450"　width="450">
　<defs>
　　<mask　id="mask1"　x="0"　y="0"　width="100"　height="100"　>
　　　　<rect　x="0"　y="0"　width="100"　height="100"
　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　</mask>
</defs>
<rect x="1"　y="1" width="200"　height="200"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask1)"/>
</svg>

試してみる‹/›

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

使用方法の説明

<mask>要素のid属性でマスクのユニークな名前を定義します。
<mask>の<rect>要素でマスクの形状を定義します。
<rect>要素のstyle属性でmask ID要素にmask CSS属性が設定されます。

オンラインサンプルもっと

テキストマスク効果

サンプル

<svg　width="200"　height="80"　
　　　　　viewBox="0　0　200　80"　version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　　　<mask　id="myMask"　maskUnits="userSpaceOnUse"
　　　　　　　　　　　　　　x="0"　y="0"　width="200"　height="80">
　　　　　　　　　　　　<rect　x="0"　y="0"　width="100"　height="80"　fill="white"/>
　　　　　　　　</mask>
　　　　　　　　<text　id="Text"　x="100" y="48"　
　　　　　　　　　　　　　　font-size="26"　font-weight="bold"　text-anchor="middle">
　　　　　　　　　　　　ブラック　&　ホワイト
　　　　　　　　</text>
　　　　</defs>
　　　　<!--　背景に黒色の矩形を描画　-->
　　　　<rect x="100" y="10" width="95" height="60"></rect>
　　
　　　　<!--　テキスト文字列を2度描画します。まず、マスクのない白色のテキストで、次にマスクを適用した黒色のテキストで-->
　　　　<use xlink:href="#Text" fill="white"/></use>
　　　　<use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use>
</svg>

テストを見てみる ‹/›

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

SVG <Animation> アニメーション要素 SVG <clipPath> 要素