SVG 基礎知識：マスク (mask) 完全ガイド
マスクとはSVG要素の可視性を制御するために利用される手法です。ある要素の可視領域と別の要素とを組み合わせてマスク効果を作成します。マスクを作成する際は通常、マスクされる要素と同じサイズと位置の図形要素と、塗つぶしで塗りつぶされた図形を組み合わせて作成します。
マスク要素はmaskUnitsとmaskContentUnitsという2つのコア属性を持ちます。maskUnits属性はマスク要素の座標系を定義し、ユーザースペース座標系（デフォルト）またはオブジェクトの境界ボックス座標系にすることができます。maskContentUnits属性はマスク要素のグラフィックの座標系を定義し、maskUnits属性と同様にデフォルトでもユーザースペース座標系になります。
マスクの作成および使用には、次のステップが含まれます。
- 例えば、このプロジェクトは医療費を大幅に削減すると期待されています。
<mask id="myMask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="50" fill="white" />
</mask>
- マスク
<rect x="0" y="0" width="100" height="100" fill="red" mask="url(#myMask)" />
上の例では、白い円のマスク要素を作成、定義して、赤い長方形に適用しています。
マスク要素の形状は任意の形状にでき、1つの形状だけでなく、複数の形状の組み合わせにすることもできます。マスク要素の形状は、長方形、円、パスなど任意のSVGグラフィック要素を使って作成できます。
グラデーション、パターン、テキストなどを加えて、より複雑なマスクを作成することもできます。と要素を使用してグラデーションを作成し、要素を使用してパターンを作成し、要素を使用してテキストを追加します。
ひとことで言えば、マスクは SVG に関する強力なテクノロジーで、単純な形状のマスクから複雑なグラデーションの入ったマスクやパターンマスクまで、多様なマスク効果を作成するために活用できます。マスクを適宜使用することで、さまざまな独特の視覚効果を生み出すことができます。
