Mặt nạ SVG CSS: Giữ hình bóng, đặt màu tùy ý

Mặt nạ SVG CSS điều khiển phần nào của phần tử vẫn nhìn thấy. Với biểu tượng một màu, dùng hình bóng SVG làm mặt nạ và tô phần tử bằng background-color: currentColor. Biểu tượng lấy màu nhìn thấy từ CSS thay vì hiển thị bảng màu gốc SVG.

Bắt đầu với độ trong suốt của nguồn. Hình chữ nhật không trong suốt sau hình có thể biến biểu tượng dự định thành khối đặc. Lỗ trong suốt phải giữ trong suốt nếu muốn trang bên dưới hiện xuyên qua.

Tài liệu mask-image của MDN mô tả cách ảnh nguồn và chế độ mặt nạ xác định khả năng nhìn thấy. Nhiệm vụ thực tế là chuẩn bị hình bóng hữu ích, chọn cách diễn giải và kiểm tra ở kích thước giao diện sử dụng.

Dùng mặt nạ khi mục tiêu là một hình bóng được tô

Xét biểu tượng đánh dấu trang có lỗ hình thoi và sọc san hô nhỏ. Dưới dạng ảnh SVG thông thường, nó có hai màu. Làm mặt nạ alpha trên phần tử xanh lam, hình không trong suốt để lộ xanh lam; sọc san hô không còn hiện thành màu riêng.

Điều đó hữu ích cho biểu tượng giao diện đổi màu theo chủ đề. Nó là lựa chọn bàn giao kém cho hình minh họa có khác biệt màu mang ý nghĩa.

Nếu cần sửa từng màu tô và viền SVG, dùng hướng dẫn chỉnh màu SVG. Mặt nạ hữu ích khi bản thân hình bóng là phần tái sử dụng. Với ranh giới hình học cứng, điều chỉnh vùng cắt SVG tùy chỉnh vừa đích và chọn kéo giãn hình bóng hay giữ tỷ lệ.

Chuẩn bị nguồn nhỏ với lỗ thật

Lưu ví dụ gốc này thành bookmark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#087f8c" fill-rule="evenodd"
    d="M5 3H19V21L12 17L5 21Z M12 6L15 9L12 12L9 9Z"/>
  <rect x="9" y="13" width="6" height="2" fill="#e76f51"/>
</svg>

Đường dẫn đầu chứa phía ngoài hình đánh dấu trang và lỗ hình thoi của nó. Không có hình chữ nhật nền đầy kích thước. Hình chữ nhật nhỏ thứ hai là sọc san hô.

Mở SVG trên nền tương phản trước khi dùng làm mặt nạ. Kiểm tra nhìn xuyên được hình thoi và quanh biên ngoài. Hình thoi trắng vẽ lên hình đánh dấu trang đặc trông tương tự trên trang trắng, nhưng vẫn không trong suốt trong mặt nạ alpha.

Với tài nguyên hiện có, kiểm tra hình nền cùng họa tiết nhìn thấy. Hướng dẫn nền SVG trong suốt trình bày khác biệt giữa khoảng trống và hình chữ nhật trắng.

Tô phần tử biểu tượng bằng CSS

Đặt icon.css cạnh SVG và dùng các quy tắc này:

.bookmark-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("./bookmark.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #175cd3;
}

Dùng nhãn nhìn thấy trên nút:

<button class="save-button" type="button">
  <span class="bookmark-icon" aria-hidden="true"></span>
  Save article
</button>

Ở đây biểu tượng đi kèm “Save article”, nên bị ẩn khỏi cây trợ năng thay vì lặp nhãn đó. Ví dụ chỉ thể hiện trình bày; hãy kết nối riêng nút với hành động lưu của ứng dụng.

Phần tử cần khung để tô, nên CSS đặt chiều rộng, chiều cao và display. currentColor dùng màu văn bản của nó. Đổi color của nút đổi màu biểu tượng mà không viết lại bookmark.svg.

Tài liệu mask-size định nghĩa contain là đặt toàn ảnh mặt nạ vừa khung và giữ tỷ lệ. Kết hợp căn giữa và không lặp, nó đặt nguồn trong một khung biểu tượng dễ dự đoán. Hướng dẫn mặt nạ của web.dev trình bày các điều khiển kích thước và lặp đó.

Phục vụ ví dụ qua HTTP, cả khi thử cục bộ. Mô tả mask-image của MDN cảnh báo nguồn ảnh file:// cục bộ không được chấp nhận cho cách dùng này. Ảnh mặt nạ thiếu hoặc lỗi có thể làm phần tử được che vô hình.

Phân biệt ảnh SVG với phần tử mask SVG

Tệp SVG dùng làm ảnh và tham chiếu phần tử SVG <mask> là đầu vào khác nhau. Đừng chọn chế độ chỉ vì tên tệp kết thúc .svg.

Tài liệu mask-mode quy định mặc định phụ thuộc nguồn này. Theo diễn giải alpha, đen đặc và trắng đặc đều để lộ phần tử. Theo diễn giải độ chói, trắng đặc để lộ và đen che; giá trị giữa có thể tạo hiển thị một phần.

mask-type áp dụng cho phần tử SVG <mask> và mặc định là luminance, theo tài liệu mask-type. Thêm nó vào span biểu tượng thông thường không đổi cách diễn giải mặt nạ ảnh. Dùng mask-mode trên phần tử được che khi cần chỉ định hành vi đó.

Ví dụ đánh dấu trang dùng ảnh SVG ngoài thông thường và chọn rõ alpha. Thử thuộc tính bạn dùng trong các trình duyệt bạn hỗ trợ; hỗ trợ tính năng mặt nạ rộng không xác lập hỗ trợ mọi tổ hợp chế độ và nguồn.

Chẩn đoán khối vuông, biểu tượng mất hoặc lỗ bị lấp

Một phép thử hữu ích với trường hợp sai là đặt hình chữ nhật trắng đặc đầy kích thước sau bản sao bookmark.svg. Với diễn giải alpha, bản đó để lộ toàn vùng mặt nạ. Đổi chữ nhật từ trắng sang đen không khôi phục hình bóng vì cả hai màu đều không trong suốt.

Xóa nền không mong muốn khỏi nguồn thay vì chỉnh màu phần tử. Giữ tệp gốc để so sánh bản đã sửa.

Giữ những kiểm tra này riêng. Yêu cầu ảnh thành công không chứng minh nguồn có độ trong suốt đúng, và độ trong suốt đúng không cung cấp chiều rộng hoặc cao còn thiếu cho phần tử.

Đánh giá ở kích thước thành phần

Phóng lớn biểu tượng để kiểm tra đường bao, rồi đưa về kích thước giao diện thực. Kiểm tra lỗ hình thoi, khuyết dưới và khoảng giữa biểu tượng với nhãn. Bản lớn giúp tìm lỗi; bản nhỏ cho biết thiết kế có hữu ích không.

Thử hai nền trang tương phản và hai màu biểu tượng. Lỗ nên hiện màu trang trong mỗi trường hợp. Nếu nó vẫn trắng, quay lại cấu trúc nguồn.

Với bộ biểu tượng, so sánh ký hiệu lân cận ở cùng kích thước CSS. ViewBox có thể chứa lượng khoảng trống khác nhau khiến các khung bằng nhau trông không đều. Hướng dẫn chuẩn bị biểu tượng bộ UI trình bày việc nhất quán đó.

Chỉ khôi phục hình bóng raster khi nguồn cần

PNG trong suốt đã có thể làm mặt nạ CSS; chuyển SVG không phải yêu cầu của mặt nạ. Giữ nguồn vector sạch hiện có khi có.

Nếu biểu tượng hữu ích chỉ còn ảnh raster thô, quy trình PNG sang SVG của PerfectVector có thể giúp chuẩn bị bản chỉnh sửa được để đánh giá. Cắt sát họa tiết, kiểm tra bản xem trước vector để tìm vùng nền và lỗ mất, rồi tải SVG. Dùng tệp đó làm mặt nạ và lặp kiểm tra kích thước thành phần.

Với hình đánh dấu trang, đánh giá khuyết ngoài và lỗ hình thoi trước khi lo về sọc san hô gốc. Màu mặt nạ đồng nhất cũng sẽ hấp thụ màu sọc đó. Hình minh họa nhiều màu phức tạp có thể cần xử lý khác; chủ động chọn hình bóng thay vì đồ lại mọi chi tiết.

Tổng quan vector hóa ảnh giải thích khôi phục nguồn rộng hơn. Tệp vector vẫn cần hình hữu ích và độ trong suốt phù hợp cho quy trình CSS này.

Câu hỏi thường gặp

Mặt nạ SVG có giữ màu gốc không? Mặt nạ điều khiển khả năng nhìn thấy. Trong ví dụ nền đồng màu, phần tử cung cấp một màu, nên màu riêng của nguồn không được giữ.

Vì sao biểu tượng thành khối vuông đặc? Kiểm tra nền không trong suốt đầy kích thước trong nguồn mặt nạ. Theo diễn giải alpha, trắng đặc và đen đặc đều để lộ phần tử.

Mặt nạ SVG luôn là mặt nạ độ chói phải không? Không. Ảnh SVG thông thường thường dùng alpha dưới match-source. Phần tử mask SVG mặc định dùng độ chói trừ khi cách diễn giải được đổi.

Tôi phải chuyển PNG trong suốt sang SVG không? Không. PNG có thể cung cấp ảnh mặt nạ. Vector hóa là tùy chọn khi cần khôi phục hoặc sửa hình bóng phù hợp từ nguồn raster.

Nguồn tham khảo

1. MDN — mask-image — Nguồn ảnh, tải lỗi, yêu cầu máy chủ cục bộ và khả năng nhìn thấy.
2. MDN — mask-mode — Alpha, độ chói và mặc định phụ thuộc nguồn.
3. MDN — mask-type — Diễn giải phần tử mask SVG.
4. MDN — mask-size — Kích thước contain và tỷ lệ ảnh.
5. web.dev — Áp dụng hiệu ứng ảnh bằng mask-image CSS — Mặt nạ ảnh, kích thước và lặp.

Bắt đầu với một biểu tượng và kiểm tra hình bóng, lỗ cùng kích thước UI cuối. Nếu cần khôi phục nguồn raster, hãy chuẩn bị một bản SVG để đánh giá, kiểm tra độ trong suốt và thử với màu CSS giao diện sẽ dùng.