クリッピング mask 要素について

クリッピングのmask要素を試してみます。

まずは、もっともシンプルな基画像をmask要素を指定したSVGでmaskする方法です。

全体のサンプルは以下です。

<!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 10,10 90,150 120,20 10,10"
                stroke       = "#999999"
                stroke-width = "1"
                fill         = "#434343"
            />
            <path 
                d            = "M 60,60 140,200 170,70 60,60"
                stroke       = "#999999"
                stroke-width = "1"
                fill         = "#848484"
            />
            <path 
                d            = "M 110,110 190,250 220,120 110,110"
                stroke       = "#999999"
                stroke-width = "1"
                fill         = "#cfcfcf"
            />
        </mask>
    </defs>

    <image href="./sima.jpg" mask="url(#test_mask_dom1)"/>

</svg>

</body>
</html>

サーバ上のHTMLはこちら(test1.html)

画面にアクセスすると、基画像に対して、3つのSVG要素でmaskをしていることがわかります。

また、それぞれのSVG要素には

                fill         = "#434343"

                fill         = "#848484"

                fill         = "#cfcfcf"

というfillの色指定をしており、上から順に「うすい黒 → 中間の薄さ → うすい白」という色合いになっています。

サンプルの出力から、mask要素は、白に近づくにつれて基画像がくっきりと出力される(maskの度合が薄くなる)ことがわかります。

また、黒に近いmask要素は基画像がほとんど写っていません。

このサンプルをもとにmask要素の他の効果を調べてみようと思います。

クリッピング mask 要素について

コメントを残す