クリッピング mask 要素について(その3) fill-opacity で透明度を指定する
mask要素に fill-opacity を指定して、効果を透明にすることができます。
前回同様に鳥の画像に対して、fill-opacity の値を0.4に指定したマスクを4つ用意しました。
また、4つのマスク要素はそれぞれ重なるように配置し、重なった部分のマスクがどのように出力されるのかを見てみます。
全体のサンプルは以下です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg width="500" height="300" viewBox="0 0 500 300">
<defs>
<mask id="test_mask_dom1">
<path
d = "M 60,50 130,210 190,60 60,50"
fill = "#cccccc"
fill-opacity = "0.4"
/>
<path
d = "M 90,70 160,230 220,80 90,70"
fill = "#cccccc"
fill-opacity = "0.4"
/>
<path
d = "M 120,90 190,250 250,100 120,90"
fill = "#cccccc"
fill-opacity = "0.4"
/>
<path
d = "M 150,110 220,270 280,120 150,110"
fill = "#cccccc"
fill-opacity = "0.4"
/>
</mask>
</defs>
<image href="./sima.jpg" mask="url(#test_mask_dom1)" />
</svg>
</body>
</html>
画面にアクセスすると、元画像に対して fill-opacity を指定したことにより透明になったマスクがされていることがわかります。
また、マスク同士が重なっている箇所については、重なった部分のみマスクの値が軽減され、元画像がくっきりと表示されることもわかります。(キャプチャ参照)