<mask>

<mask> 元素定義了一個用於將當前物件合成到背景中的 Alpha 遮罩。可以使用/引用 mask 屬性來使用/引用遮罩。

示例

html
<svg viewBox="-10 -10 120 120">
  <rect x="-10" y="-10" width="120" height="120" fill="blue" />
  <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Everything under a black pixel will be invisible -->
    <path
      d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
      fill="black" />
  </mask>

  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" fill="purple" mask="url(#myMask)" />
</svg>

屬性

height

此屬性定義了遮罩區域的高度。值型別：<length>；預設值：120%；可動畫：是

maskContentUnits

此屬性定義了<mask>內容的座標系。值型別：userSpaceOnUse|objectBoundingBox；預設值：userSpaceOnUse；可動畫：是

maskUnits

此屬性定義了<mask>上x、y、width和height屬性的座標系。值型別：userSpaceOnUse|objectBoundingBox；預設值：objectBoundingBox；可動畫：是

x

此屬性定義了遮罩區域左上角的 x 軸座標。值型別：<coordinate>；預設值：-10%；可動畫：是

y

此屬性定義了遮罩區域左上角的 y 軸座標。值型別：<coordinate>；預設值：-10%；可動畫：是

width

此屬性定義了遮罩區域的寬度。值型別：<length>；預設值：120%；可動畫：是

使用上下文

類別容器元素
允許的內容任意數量的以下元素，以任意順序
動畫元素
描述性元素
形狀元素
結構元素
漸變元素
<a>、<clipPath>、<cursor>、<filter>、<font>、<font-face>、<foreignObject>、<image>、<marker>、<mask>、<pattern>、<script>、<style>、<switch>、<text>、<view>

規範

規範
CSS 遮罩模組級別 1
# MaskElement

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱