クリッピング mask 要素について(その4) テキストに適用する
mask要素をテキストに適用して試してみます。
まず、テキストタグを用意します。
<text
id="Text"
x="120"
y="60"
font-size="20"
text-anchor="middle"
>
テストテキストA
</text>
このテキストタグのIDを、use で指定します。
<use xlink:href="#Text" fill="#ff0000" mask="url(#Mask)" />
上記の例では、「mask=”url(#Mask)”」という箇所で、マスク要素を指定しています。
マスク要素は、以下のように指定します。
<mask
id="Mask"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="300"
height="100"
>
<rect x="0" y="0" width="300" height="100" fill="#eeeeee" />
</mask>
ここでポイントとなるのは、マスク要素にrectを指定して、長方形の形でマスクし、
その配色は「fill=”#eeeeee”」で指定しています。
この配色が黒に近いか、白に近いかで、マスクのかかり具合が決まります。
下記の例では、マスク要素を3つ用意し、それぞれ以下の色を指定しています。
「#eeeeee」(白に近い色)
「#9b9b9b」(グレー)
「#565656」(黒に近い色)
全体のサンプルは以下です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="300" height="100" viewBox="0 0 300 100">
<defs>
<mask
id="Mask"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="300"
height="100"
>
<rect x="0" y="0" width="300" height="100" fill="#eeeeee" />
</mask>
<text
id="Text"
x="120"
y="60"
font-size="20"
text-anchor="middle"
>
テストテキストA
</text>
</defs>
<use xlink:href="#Text" fill="#ff0000" mask="url(#Mask)" />
</svg>
<svg width="300" height="100" viewBox="0 0 300 100">
<defs>
<mask
id="Mask2"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="300"
height="100"
>
<rect x="0" y="0" width="300" height="100" fill="#9b9b9b" />
</mask>
<text
id="Text2"
x="120"
y="60"
font-size="20"
text-anchor="middle"
>
テストテキストB
</text>
</defs>
<use xlink:href="#Text2" fill="#ff0000" mask="url(#Mask2)" />
</svg>
<svg width="300" height="100" viewBox="0 0 300 100">
<defs>
<mask
id="Mask3"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="300"
height="100"
>
<rect x="0" y="0" width="300" height="100" fill="#565656" />
</mask>
<text
id="Text3"
x="120"
y="60"
font-size="20"
text-anchor="middle"
>
テストテキストC
</text>
</defs>
<use xlink:href="#Text3" fill="#ff0000" mask="url(#Mask3)" />
</svg>
</body>
</html>
画面にアクセスすると、3つのテキスト要素に対して、(異なるfillの値で)マスクされたテキスト文字が出力されていることがわかります。
また、マスクのかかり具合は、黒に近づくにつれて強くかかっていることが確認できます。