SVG <mask>蒙板

admin發表於2018-09-13
SVG

使用<mask>可以定義一個蒙版。

<clipPath>裁切路徑和<mask>蒙版非常類似，甚至可以說實現同一型別的效果。

它們之間的主要不同點是:

（1）.裁切路徑是可見與不可見的突變，要麼可見要麼不可見。

（2）.蒙版則是可見與不可見的漸變，期間可以有過渡效果。

關於裁切路徑的基本用法可以參閱SVG <clipPath>裁切路徑一章節。

蒙板用<mask>元素定義，只需要在渲染物件的mask屬性中引用蒙板即可。

<mask>元素可以包含任何的圖形元素和容器元素(例如<g>)。

蒙板效果基本就是根據蒙板中每個點的顏色和透明度計算出一個最終的透明度，然後在渲染物件的時候，在物件上面罩上這個帶有不同透明度的蒙板層，體現出蒙板效果。對於渲染物件來說，只有在蒙版內的部分會按照蒙板上點的透明度來渲染，不在蒙板內的部分不顯示。程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:800px;
  height:350px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient
                      id="Gradient"
                      gradientUnits="userSpaceOnUse"
                      x1="0" y1="0"
                      x2="800" y2="0">
        <stop offset="0" stop-color="white" stop-opacity="0" />
        <stop offset="1" stop-color="white" stop-opacity="1" />
      </linearGradient>
      <mask id="Mask"
            maskUnits="userSpaceOnUse"
 
            x="0" y="0"
            width="800" height="300">
        <rect
              x="0" y="0"
              width="800" height="300"
              fill="url(#Gradient)"/>
      </mask>
 
      <text id="Text"
            x="400" y="200"
            font-family="Verdana"
            font-size="100"
            text-anchor="middle">
        螞蟻部落歡迎您
      </text>
    </defs>
 
    <rect x="0" y="0" width="800" height="300" fill="#ccc" />
    <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
    <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
  </svg>                        
</body>
</html>

下面對程式碼簡單做一下介紹:

（1）.蒙版的透明度是可以過渡的。

（2）.自行修改蒙版的尺寸，引用蒙版的元素尺寸超過這個尺寸是不可見的。

特別說明:

（1）.蒙版僅支援黑或白和透明度。

（2）.當顏色為純白色時，蒙版透明度控制蒙版層透明度；當顏色為純黑色時，無論透明度是多少均是透明的。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:800px;
  height:350px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <linearGradient
                      id="Gradient"
                      gradientUnits="userSpaceOnUse"
                      x1="0" y1="0"
                      x2="800" y2="0">
        <stop offset="0" stop-color="green" stop-opacity="0" />
        <stop offset="1" stop-color="green" stop-opacity="1" />
      </linearGradient>
      <mask id="Mask"
            maskUnits="userSpaceOnUse"
            x="0" y="0"
            width="800" height="300">
        <rect
              x="0" y="0"
              width="800" height="300"
              fill="url(#Gradient)"/>
      </mask>
    </defs>
  
    <rect x="0" y="0" width="800" height="300" mask="url(#Mask)" />
  </svg>                        
</body>
</html>

設定漸變顏色為綠色，但是表現為黑白效果；儘管總是表現黑白，但不同顏色的程度有差別。

當設定顏色為黑色的時候，無論如何設定透明度，始終表現為透明效果。

maskUnits屬性:

具有兩個屬性值:

（1）.objectBoundingBox(預設值)表示mask元素座標(x,y)和尺寸(width,height)的座標系統使用引用該蒙板的元素的當前使用者座標系。

（2）.userSpaceOnUse表示mask元素座標(x,y)和尺寸(width,height)的座標系統用相對於引用蒙板的元素的包圍盒的相對值。

maskContentUnits屬性:

與上面兩個屬性作用類同，只不過是設定<mask>子元素所採用的座標系，即x, y, width和height的取值方式。

具有兩個屬性值:

（1）.userSpaceOnUse(預設值)。

（2）.objectBoundingBox，在此屬性值下，x, y, width和height的預設值分別是-10%,-10%,120%,120%。

相關文章