clip
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Thuộc tính clip xác định vùng hiển thị của một phần tử. Bạn nên dùng clip-path thay thế.
Note:
Là một thuộc tính trình bày, clip cũng có một thuộc tính CSS tương ứng: clip. Khi cả hai được chỉ định, thuộc tính CSS sẽ được ưu tiên.
Thuộc tính này có cùng các giá trị tham số như được định nghĩa cho thuộc tính CSS clip. Các giá trị không có đơn vị, biểu thị tọa độ người dùng hiện tại, được phép dùng trong các giá trị tọa độ của rect(). Giá trị auto xác định một đường cắt dọc theo ranh giới của viewport được tạo bởi phần tử đã cho.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
Ví dụ
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
<!-- Auto clipping -->
<svg x="0" width="10" height="10" clip="auto">
<circle cx="5" cy="5" r="4" stroke="green" />
</svg>
<!-- Rect(top, right, bottom, left) clipping -->
<svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
<circle cx="5" cy="5" r="4" stroke="green" />
</svg>
</svg>
Ghi chú sử dụng
| Giá trị | auto | rect() |
|---|---|
| Giá trị mặc định | auto |
| Có thể hoạt ảnh | Có |
Giá trị auto xác định một đường cắt dọc theo ranh giới của viewport được tạo bởi phần tử đã cho. Giá trị rect() xác định một hình chữ nhật cắt theo cú pháp sau: rect(<top>, <right>, <bottom>, <left>). Các giá trị <top> và <bottom> chỉ định độ lệch tính từ cạnh viền trên cùng của viewport phần tử, trong khi <right> và <left> chỉ định độ lệch tính từ cạnh viền trái của viewport phần tử.
Thông số kỹ thuật
| Specification |
|---|
| CSS Masking Module Level 1 # clip-property |