SVG支持的蒙板

SVG支持多種蒙板特效，使用這些特性，我們可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"還是"遮罩"就不去區分了，這里都叫做蒙板吧。

SVG支持的蒙板類型：
  1. 裁剪路徑(cliping path)

裁剪路徑是由path, text或者基本圖形組成的圖形。所有在裁剪路徑內的圖形都可見，所有在裁剪路徑外的圖形都不可見。
  2. 遮罩/蒙板(mask)

蒙板是一種容器，它定義了一組圖形并將它們作為半透明的媒介，可以用來組合前景對象和背景。
裁剪路徑和其他的蒙板一個重要的區別就是：裁剪路徑是1位蒙板，也就是說裁剪路徑覆蓋的對象要么就是全透明(可見的，位于裁剪路徑內部)，要么就是全不透明(不可見，位于裁剪路徑外部)。而蒙板可以指定不同位置的透明度。

視窗的裁剪路徑 - overflow和clip屬性

HTML元素的overflow屬性和clip屬性共同設置了該元素對內容的剪裁行為。同樣的，在SVG中，這2個屬性還可以使用。

overflow = visible | hidden | scroll | auto | inherit
overflow屬性定義了當元素的內容超過元素的邊框的時候采取的行為。

這個屬性可以用于能創建新視窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。這個屬性的取值含義如下：
  visible：顯示所有內容，即使是內容已經在元素的邊框外邊，這個是默認值。
  hidden：隱藏超出裁剪路徑的內容。裁剪路徑由clip屬性指定。
  scroll：采用滾動條的形式，呈現超出的內容。
  auto：采用瀏覽器定義的行為，這個似乎不太可靠。
這個屬性和CSS2中的同名屬性基本相同，只不過在SVG中，有一些不同的處理過程：
  1.overflow屬性對于除了創建新視窗的元素(svg,symbol,image,foreignObject),pattern和marker元素外的元素都沒有效果。
  2.裁剪路徑與視窗是對應的，創建了新的視窗，就創建了新的裁剪路徑。默認的裁剪路徑就是視窗邊界。
clip = <shape> | auto | inherit
clip屬性用于設置當前視窗的裁剪路徑。

這個屬性可以用于能創建新視窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。這個屬性和CSS2中同名屬性有一樣的參數。auto代表裁剪路徑與視窗邊框是一致的。當使用圖形作為參數時(設置裁剪矩形的top,right,bottom和left的值)， 可以使用用戶坐標值(即不帶單位的坐標)。例如：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表