グラフィックスをマスクするには<mask>要素の子要素としてマスクのグラフィックスを定義し、 ベースとなるグラフィックスのmask属性にマスクのURLを指定します。
<defs>
<!-- マスクの定義 -->
<mask id="mask">
<ellipse cx="90" cy="100" rx="50" ry="70" fill-opacity="0.75" fill="gray" />
</mask>
</defs>
<!-- マスクする -->
<image xlink:href="kuri.jpg" x="10" y="10" width="200" height="200" mask="url(#mask)" />
主な属性を次の表に示します。
属性 | 解説 |
---|---|
id | 識別名 |
次の例はイメージに楕円のマスクした例です。比較のために、右側に単純にクリッピングしたイメージを並べて表示します。
<svg width="350" height="230" stroke="black" stroke-width="1px">
<defs>
<!-- マスクの定義 -->
<mask id="mask">
<ellipse cx="90" cy="100" rx="50" ry="70"
fill-opacity="0.75" fill="gray" />
</mask>
<!-- クリップの定義 -->
<clipPath id="clip" clipPathUnits="userSpaceOnUse">
<ellipse cx="290" cy="100" rx="50" ry="70" fill="none" />
</clipPath>
</defs>
<!-- マスク -->
<image xlink:href="kuri.jpg" x="10" y="10"
width="200" height="200" mask="url(#mask)" />
<!-- クリップ -->
<image xlink:href="kuri.jpg" x="210" y="10"
width="200" height="200" clip-path="url(#clip)" />
</svg>
実行すると次のように表示されます。
グラデーションしたグラフィックスでマスクすることもできます。
次の例はグラデーションした矩形で文字列をマスクする例です。
<svg width="300" height="160" stroke="black" stroke-width="1px">
<!--- グラデーションの定義 -->
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="black" />
<stop offset="50%" stop-color="white" />
<stop offset="100%" stop-color="black" />
</linearGradient>
</defs>
<!--- マスクの定義 -->
<defs>
<mask id="mask2" clipPathUnits="userSpaceOnUse">
<rect x="10" y="10" width="300" height="80" fill="url(#grad1)" />
</mask>
</defs>
<!--- 文字列をマスクする -->
<text x="20" y="50" mask="url(#mask2)" style="font-size:36px">
SVGは楽しいな~
</text>
<!--- 参考用グラデーション -->
<rect x="10" y="80" width="300" height="40" fill="url(#grad1)" />
</svg>
実行すると次のように表示されます。