在 svg 也能使用類似 photoshop 的遮色片的效果，遮色片簡單說就是可以依據你指定的圖片依據本身顏色的資訊，讓被遮的圖片會有半透明的效果，這邊來示範一下，這邊我們設定簡單的紅藍綠來當遮色片：
接下來像這樣把遮色片指定上去
結果如下，可以看得出來越深的顏色遮上去後透明度越低。
我們也可以用透明度來做遮色片：
接著我們把遮色片套到圖片上，先指定 svg 的漸層來當 mask
接著把遮色片套到圖片上就完成了。
接下來像這樣把遮色片指定上去
結果如下，可以看得出來越深的顏色遮上去後透明度越低。
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.
留言