<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%
;可动画:是
使用上下文
规范
规范 |
---|
CSS 遮罩模块级别 1 # MaskElement |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
另请参阅
- 其他剪裁和遮罩 SVG 元素:
<clipPath>
- 剪裁和遮罩 CSS 属性:
mask
、mask-image
、mask-mode
、mask-repeat
、mask-position
、mask-clip
、mask-origin
、mask-composite
、mask-size
、pointer-events