Cắt và tạo mặt nạ SVG

Cắt và tạo mặt nạ SVG

Các phần tử SVG có thể được cắt bớt và che đi.

Phần tử <clipPath> được sử dụng để cắt phần tử SVG.

Phần tử <mask> được sử dụng để áp dụng mặt nạ cho phần tử SVG.

Cắt SVG

Cắt bớt là khi bạn loại bỏ một phần khỏi một phần tử.

Để cắt, chúng tôi sử dụng phần tử <clipPath> .

Mọi đường dẫn/phần tử bên trong phần tử <clipPath> đều được kiểm tra và đánh giá. Sau đó, mọi phần của mục tiêu nằm BÊN NGOÀI khu vực này sẽ KHÔNG được hiển thị. Nói cách khác: Mọi thứ bên ngoài đường dẫn đều bị ẩn và mọi thứ bên trong đều được hiển thị!

Phần tử <clipPath> thường được đặt trong phần <defs> .

Hãy xem xét một số ví dụ:

Trong ví dụ này, chúng ta tạo một vòng tròn màu đỏ có tâm ở (50,50), với bán kính 50:

Đây là mã SVG:

Bây giờ chúng ta thêm phần tử <clipPath> với một phần tử <rect> duy nhất. Phần tử <rect> này sẽ bao phủ NỬA TRÊN của hình tròn. <rect> sẽ KHÔNG được rút ra; Thay vào đó, kích thước và vị trí của nó sẽ được sử dụng để xác định pixel nào của vòng tròn sẽ được hiển thị. Vì hình chữ nhật chỉ bao phủ nửa trên của hình tròn nên nửa dưới của hình tròn sẽ biến mất:

Đây là mã SVG:

Mặt nạ SVG

Để tạo mặt nạ, chúng tôi sử dụng phần tử <mask> .

Phần tử <mask> được sử dụng để áp dụng mặt nạ cho phần tử SVG.

Một mặt nạ được tham chiếu với thuộc tính mask .

Đây là một ví dụ về mặt nạ đơn giản:

Đây là mã SVG:

Ví dụ trên xác định mặt nạ có id="mask1" . Bên trong phần tử <mask> có phần tử <rect> . Phần tử <rect> này xác định hình dạng của mặt nạ.

Ví dụ này cũng định nghĩa phần tử <rect> sử dụng mặt nạ. Mặt nạ được tham chiếu với thuộc tính mask .

Hình chữ nhật màu đỏ phải cao 100 pixel nhưng chỉ hiển thị 50 pixel đầu tiên theo chiều dọc. Điều này là do hình chữ nhật mặt nạ chỉ cao 50 pixel. Hình chữ nhật chỉ hiển thị ở những phần được bao phủ bởi hình chữ nhật mặt nạ.

Phần tử <rect> cuối cùng chỉ để hiển thị kích thước của hình chữ nhật không có mặt nạ.

Đây là một ví dụ khác sử dụng phần tử <circle> để xác định hình dạng của mặt nạ:

Đây là mã SVG:

Tô màu và độ mờ

Màu tô của các phần tử bên trong phần tử <mask> xác định độ mờ của màu tô của phần tử tham chiếu đến mặt nạ.

Trong các ví dụ trên, chúng tôi chỉ sử dụng fill="white". Trong mặt nạ, màu trắng được coi là vùng sẽ được hiển thị và màu đen được coi là vùng được che.

Mặt nạ sẽ mờ hơn khi màu càng gần #ffffff (trắng) và càng trong suốt khi màu càng gần #000000 (đen):

Đây là mã SVG:

Độ dốc trong mặt nạ

Trong ví dụ này, hình dạng mặt nạ sử dụng dải màu làm màu tô:

Đây là mã SVG: