SVG clipPath và mask: Chọn mép rõ hoặc mờ dần

Dùng <clipPath> SVG khi muốn ảnh dừng tại đường bao xác định. Dùng <mask> SVG khi ảnh cần mờ dần qua độ trong suốt một phần. Mặt nạ cũng có thể cắt mép rõ, nhưng đường dẫn cắt thể hiện ý định đơn giản hơn cho một mép hình học sắc nét. Đặc tả CSS Masking định nghĩa chúng là những thao tác kiểm soát hiển thị riêng biệt.

Lựa chọn này quan trọng khi ảnh có hình logo được đưa vào trình chỉnh sửa khác. Cả hai phương pháp kiểm soát những gì bạn thấy; không phương pháp nào biến pixel bị ẩn thành hình học đã xóa hoặc chuyển ảnh thành đường dẫn vector. Hướng dẫn này dùng một cảnh raster tự tạo và một đường bao, rồi chỉ đổi quy tắc hiển thị. Bạn có thể áp dụng cùng phép thử với hình của mình trước khi xuất.

Chọn theo mép bạn cần

Mép nhìn thấy của vùng cắt vẫn có thể được khử răng cưa thông thường khi kết xuất. Điều nó không thể thể hiện là dải hiển thị một phần có chủ đích từ gradient thang xám hoặc độ đục bên trong hình bị cắt. Hướng dẫn cắt và mặt nạ của MDN làm rõ khác biệt bằng ví dụ SVG nhỏ.

Đối chiếu một ảnh dưới ba quy tắc hiển thị

Trong phép thử này, tôi vẽ phong cảnh nhỏ, raster hóa thành PNG 400 × 240 và đặt cùng các pixel dưới cùng đường bao giống chiếc lá trong mọi ô. Ô bên trái cắt theo đường bao. Ô giữa dùng mặt nạ độ chói trắng đến đen; ô phải dùng mặt nạ alpha từ đục đến trong suốt. Cả hai gradient được chọn để tạo cùng hiệu ứng mờ dần từ trái sang phải. Mỗi kết quả xuất hiện trên nền sáng và tối, giúp đánh giá mép biến mất dễ hơn.

Hai cột mặt nạ trông giống nhau ở đây có lý do: gradient độ chói trắng đến đen và gradient độ đục của màu trắng mã hóa các giá trị mặt nạ tương đương. Chúng không phải đầu vào thay thế được cho nhau. Đen đục ẩn nội dung dưới mặt nạ độ chói, còn đen đục vẫn hiển thị dưới mặt nạ alpha. Trong chế độ alpha, độ đục của pixel quyết định kết quả; màu đen hay trắng không quyết định. Định nghĩa xử lý mặt nạ CSS Masking quy định cả hai phép tính.

Tạo vùng cắt và mặt nạ từ một đường bao

Lưu đoạn sau thành clip-or-mask.svg, đặt photo.png của bạn bên cạnh và phục vụ cả hai tệp từ cùng thư mục qua HTTP. Hai ảnh dùng cùng một hệ tọa độ 400 × 240. Chúng chỉ khác ở clip-path và mask.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

Các ID tham chiếu phải duy nhất trong SVG. Cả vùng cắt và mặt nạ dùng userSpaceOnUse để tọa độ họa tiết khớp vùng cục bộ 400 × 240 của mỗi ảnh. Tài liệu <clipPath> của MDN mô tả việc cắt là giới hạn phần được vẽ mà không thay đổi hình học vốn có của đối tượng đích. Tài liệu <mask> của MDN phân biệt maskUnits, dùng đặt vị trí vùng mặt nạ, với maskContentUnits, dùng đặt vị trí phần hình của nó.

Để thử độ chói, nhân bản mặt nạ với ID khác, đặt mask-type="luminance" và đổi các điểm dừng gradient thành trắng đục ở đầu, đen đục ở cuối. Giữ tham chiếu mask đồng bộ với ID mới. Mặc định <mask> SVG dùng độ chói; ví dụ này nêu rõ chế độ để lần chỉnh sửa sau không âm thầm đổi ý nghĩa của màu đen. Xem tài liệu mask-type của MDN.

Kiểm tra kết quả trước khi xuất

1. Kết xuất SVG trên cả nền nhạt và tối. Hiệu ứng mờ dần dường như không thấy trên trắng có thể rõ trên nền tối.
2. Xác nhận ảnh và họa tiết dùng cùng tọa độ. Nếu chỉ đổi kích thước ảnh, đường bao có thể không còn khớp. Với vùng cắt tái sử dụng trên đối tượng kích thước khác nhau, hướng dẫn đơn vị clipPath giải thích các lựa chọn tọa độ.
3. Nếu mép mềm kết thúc đột ngột, kiểm tra x, y, width và height của mặt nạ cùng gradient. Vùng mặt nạ có thể cắt hình ngoài giới hạn; chỉ kéo rộng gradient không sửa được vùng hẹp. MDN liệt kê các giá trị mặc định của vùng mặt nạ, nhưng giới hạn chỉ định rõ dễ kiểm tra hơn trong bản bàn giao.
4. Mở lại SVG đã lưu trong ứng dụng sẽ dùng nó. Kết xuất đúng trong trình duyệt không xác nhận công cụ nhập khác giữ vùng cắt, mặt nạ, ảnh liên kết hay khả năng chỉnh sửa bạn cần.
5. Kiểm tra cấu trúc tệp. Nếu vẫn chứa <image>, nó vẫn chứa pixel raster dù đường bao cắt là vector. Kiểm tra raster nhúng cho thấy cách nhận ra khác biệt đó.

Ảnh trong ví dụ này vẫn là PNG. Cắt và mặt nạ không dò nét nó. Nếu công việc yêu cầu hình học cắt thực sự hoặc lỗ trong suốt vĩnh viễn, hãy tạo đường dẫn tương ứng trong trình chỉnh sửa và kiểm tra bản xuất. Hướng dẫn khắc phục lỗ bị tô kín giúp phân biệt lỗ thực với miếng trắng chỉ trông rỗng trên khung vẽ trắng.

PerfectVector phù hợp ở đâu

Nếu đường bao bạn cần chỉ còn trong logo PNG hoặc JPG, quy trình ảnh thành vector của PerfectVector có thể cho bản SVG ứng viên chỉnh sửa được. Kiểm tra đường dẫn ngoài, khe nhỏ và hình nền không mong muốn trước khi sao chép đường bao vào <clipPath> hoặc <mask>. Bạn vẫn chọn phương pháp hiển thị và tạo hiệu ứng trong trình chỉnh sửa SVG. Giữ bản gốc vector sạch sẵn có khi có.

Bạn không cần vector hóa ảnh chụp chỉ để đặt sau mặt nạ. Giữ pixel ảnh chụp thành ảnh khi cần bảo toàn chi tiết. Với biểu tượng một màu do CSS điều khiển thay vì ảnh trong SVG, hướng dẫn mặt nạ CSS SVG trình bày quy trình riêng đó.

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

SVG clipPath có thể tạo hiệu ứng mờ dần không? Không. Đường dẫn cắt định nghĩa phần nào của đối tượng đích nhìn thấy, ngoài khử răng cưa thông thường tại ranh giới. Dùng mặt nạ với giá trị độ đục hoặc độ chói trung gian để tạo hiệu ứng mờ dần có chủ đích.

Màu đen có ẩn ảnh trong mọi mặt nạ SVG không? Không. Đen đục ẩn dưới mặt nạ độ chói, nhưng làm hiện dưới mặt nạ alpha vì pixel vẫn đục. Hình hoàn toàn trong suốt ẩn nội dung trong cả hai chế độ.

Cắt hoặc mặt nạ có biến PNG thành hình vector không? Không. Cả hai đổi khả năng hiển thị lúc kết xuất. SVG vẫn có thể chứa <image> raster và có thể cần dò nét hoặc chỉnh đường dẫn riêng để bàn giao chỉ có vector.

Nguồn tham khảo

1. W3C — CSS Masking Module Level 1 — Định nghĩa cắt, mặt nạ và giá trị mặt nạ alpha so với độ chói.
2. MDN — Cắt và mặt nạ — Ví dụ cắt mép rõ và mặt nạ mềm.
3. MDN — <clipPath> — Cách vùng cắt hoạt động, lựa chọn tọa độ và hình học bên dưới không đổi.
4. MDN — <mask> — Vùng mặt nạ, hệ tọa độ nội dung và cách tham chiếu hoạt động.
5. MDN — mask-type — Cách diễn giải alpha và độ chói đối với hình trong mặt nạ SVG.

Nếu logo raster cần đường bao chỉnh sửa được trước, hãy tạo bản SVG ứng viên bằng PerfectVector, kiểm tra đường dẫn khôi phục rồi áp dụng vùng cắt hoặc mặt nạ và mở lại tệp xuất ở đích tiếp nhận.