SVG 的遮色片- mask 基礎

在 svg 也能使用類似 photoshop 的遮色片的效果，遮色片簡單說就是可以依據你指定的圖片依據本身顏色的資訊，讓被遮的圖片會有半透明的效果，這邊來示範一下，這邊我們設定簡單的紅藍綠來當遮色片：

接下來像這樣把遮色片指定上去

結果如下，可以看得出來越深的顏色遮上去後透明度越低。

See the Pen
svg mask color by deathhell (@deathhell)
on CodePen.

我們也可以用透明度來做遮色片：

See the Pen
svg mask by deathhell (@deathhell)
on CodePen.

接著我們把遮色片套到圖片上，先指定 svg 的漸層來當 mask

接著把遮色片套到圖片上就完成了。

See the Pen
svg mask image by deathhell (@deathhell)
on CodePen.

反應：