使用語境
屬性
height-
此屬性定義蒙版區域的高度。值型別：<length>；預設值：
120%；可動畫：是 mask-type-
此屬性定義
<mask>內容的蒙版模式。值型別：alpha|luminance；預設值：luminance；可動畫：是 遮罩內容單位-
此屬性定義
<mask>內容的座標系。值型別：userSpaceOnUse|objectBoundingBox；預設值：userSpaceOnUse；可動畫：是 遮罩單位-
此屬性定義
<mask>元素上x、y、width和height屬性的座標系。值型別：userSpaceOnUse|objectBoundingBox；預設值：objectBoundingBox；可動畫：是 x-
此屬性定義蒙版區域左上角的 x 軸座標。值型別：<coordinate>；預設值：
-10%；可動畫：是 y-
此屬性定義蒙版區域左上角的 y 軸座標。值型別：<coordinate>；預設值：
-10%；可動畫：是 width-
此屬性定義蒙版區域的寬度。值型別：<length>；預設值：
120%；可動畫：是
DOM 介面
此元素實現了 SVGMaskElement 介面。
示例
html
<svg viewBox="-10 -10 120 120">
<rect x="-10" y="-10" width="120" height="120" fill="blue" />
<mask id="myMask" mask-type="luminance">
<!-- 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>
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # MaskElement |
瀏覽器相容性
載入中…
另見
- CSS
mask-type屬性 - 其他剪裁和蒙版 SVG 元素：
<clipPath> - 剪裁和蒙版 CSS 屬性：
mask、mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-composite、mask-size