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.

留言

熱門文章