<mask>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <mask> của SVG định nghĩa một mặt nạ để ghép đối tượng hiện tại vào nền. Một mask được dùng/tham chiếu bằng thuộc tính mask và thuộc tính CSS mask-image.
Ngữ cảnh sử dụng
| Categories | Container element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements <a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
Thuộc tính
height-
Thuộc tính này định nghĩa chiều cao của vùng masking. Kiểu giá trị: <length>; Giá trị mặc định:
120%; Có thể hoạt ảnh: có mask-type-
Thuộc tính này định nghĩa chế độ mask cho nội dung của
<mask>. Kiểu giá trị:alpha|luminance; Giá trị mặc định:luminance; Có thể hoạt ảnh: có maskContentUnits-
Thuộc tính này định nghĩa hệ tọa độ cho nội dung của
<mask>. Kiểu giá trị:userSpaceOnUse|objectBoundingBox; Giá trị mặc định:userSpaceOnUse; Có thể hoạt ảnh: có maskUnits-
Thuộc tính này định nghĩa hệ tọa độ cho các thuộc tính
x,y,widthvàheighttrên<mask>. Kiểu giá trị:userSpaceOnUse|objectBoundingBox; Giá trị mặc định:objectBoundingBox; Có thể hoạt ảnh: có x-
Thuộc tính này định nghĩa tọa độ x của góc trên bên trái của vùng masking. Kiểu giá trị: <coordinate>; Giá trị mặc định:
-10%; Có thể hoạt ảnh: có y-
Thuộc tính này định nghĩa tọa độ y của góc trên bên trái của vùng masking. Kiểu giá trị: <coordinate>; Giá trị mặc định:
-10%; Có thể hoạt ảnh: có width-
Thuộc tính này định nghĩa chiều rộng của vùng masking. Kiểu giá trị: <length>; Giá trị mặc định:
120%; Có thể hoạt ảnh: có
Giao diện DOM
Phần tử này triển khai giao diện SVGMaskElement.
Ví dụ
<svg viewBox="-10 -10 120 120">
<rect x="-10" y="-10" width="120" height="120" fill="blue" />
<mask id="myMask" mask-type="luminance">
<!-- Mọi thứ nằm dưới một pixel trắng sẽ hiển thị -->
<rect x="0" y="0" width="100" height="100" fill="white" />
<!-- Mọi thứ nằm dưới một pixel đen sẽ vô hình -->
<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" />
<!-- với mask này được áp dụng, chúng ta "đục" một lỗ hình trái tim vào hình tròn -->
<circle cx="50" cy="50" r="50" fill="purple" mask="url(#myMask)" />
</svg>
Đặc tả
| Specification |
|---|
| CSS Masking Module Level 1 # MaskElement |
Tương thích trình duyệt
Xem thêm
- Thuộc tính CSS
mask-type - Các phần tử SVG khác dùng cho clipping và masking:
<clipPath> - Các thuộc tính CSS cho clipping và masking:
mask,mask-image,mask-mode,mask-repeat,mask-position,mask-clip,mask-origin,mask-composite,mask-size