Đơn vị SVG ClipPath: Làm hình tùy chỉnh vừa đối tượng

Dùng clipPathUnits="objectBoundingBox" khi hình cắt cần giãn theo giới hạn đối tượng đích. Chuẩn hóa tọa độ hình trước. Dùng userSpaceOnUse khi cần đặt vị trí cụ thể hoặc co giãn đồng đều để giữ tỷ lệ hình.

Chỉ đổi thuộc tính không chuyển đường dẫn vẽ bằng hàng trăm đơn vị thành hình có tọa độ từ không đến một. Nó có thể đẩy gần như toàn bộ vùng cắt ra ngoài đối tượng. Hướng dẫn này dùng đường bao dấu trang tự tạo để minh họa thay đổi tọa độ, biến dạng kết quả và cách làm vừa căn giữa giữ lỗ hình thoi vuông vắn.

Cắt vùng kiểm soát hiển thị. Nó không cắt các đường dẫn bên dưới thành hình học mới chỉnh sửa được. Nếu đã có đường bao SVG sạch, dùng trực tiếp; dò nét chỉ liên quan khi bạn cần khôi phục đường bao từ ảnh raster.

Chọn hệ tọa độ trước khi đổi kích thước

Mặc định là userSpaceOnUse. Tọa độ cắt của nó thuộc hệ tọa độ người dùng của phần tử tham chiếu vùng cắt. Với objectBoundingBox, góc trên trái của giới hạn đối tượng đích ánh xạ đến (0, 0), còn góc dưới phải đến (1, 1). Xem tài liệu clipPathUnits.

Hộp giới hạn của đối tượng đích không nhất thiết là viewBox của SVG ngoài. Cắt một nhóm dùng giới hạn của nhóm đó, có thể khác hình chữ nhật bên trong. Để phép thử đầu dễ dự đoán, áp dụng vùng cắt trực tiếp lên hình chữ nhật có kích thước đã biết.

Đối chiếu đối tượng rộng với đối tượng cao

Giới hạn ngoài của dấu trang là x=20, y=10, width=100, height=100. Hình thoi của nó là đường dẫn con thứ hai trong cùng đường dẫn. Phép thử áp dụng nó lên các hình chữ nhật 200 × 120 và 120 × 200 theo đơn vị SVG cục bộ.

Cột giữa lấp giới hạn từng đối tượng, nhưng hình thoi trở nên rộng hoặc cao. Cột phải giữ hình thoi và rãnh phía dưới, chừa chỗ theo trục dài hơn của đối tượng. Cả sáu lỗ vẫn trong suốt.

Lưu ví dụ hoàn chỉnh dưới đây thành clippath-comparison.svg và mở trong trình duyệt. Các cột theo thứ tự trong ảnh. Hàng trên dùng hình chữ nhật rộng; hàng dưới dùng hình cao. Các phép tịnh tiến hiển thị sắp xếp mẫu và không đổi kích thước cục bộ của đối tượng đích.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 470">
  <defs>
    <path id="silhouette" d="M20 10H120V110L70 85L20 110Z M70 30L85 45L70 60L55 45Z"/>
    <clipPath id="fixed" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="box" clipPathUnits="objectBoundingBox">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(.01 0 0 .01 -.2 -.1)"/>
    </clipPath>
    <clipPath id="wide-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 16 -12)"/>
    </clipPath>
    <clipPath id="tall-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 -24 28)"/>
    </clipPath>
  </defs>
  <g fill="#107c86">
    <rect x="0" y="0" width="200" height="120"
      transform="translate(20 30)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(260 30)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(500 30)" clip-path="url(#wide-fit)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(60 230)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(300 230)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(540 230)" clip-path="url(#tall-fit)"/>
  </g>
</svg>

Màu xanh cổ vịt thuộc các hình chữ nhật. Đường dẫn cắt cung cấp đường bao nhìn thấy. Ảnh chụp thêm nhãn và nền bàn cờ quanh cùng SVG này; bản tệp độc lập có nền trong suốt.

Chuẩn hóa giới hạn nguồn, kể cả gốc tọa độ

Với điểm (x, y) trong nguồn có giới hạn (minX, minY, width, height), tính:

normalizedX = (x - minX) / width
normalizedY = (y - minY) / height

Ở đây là (x - 20) / 100 và (y - 10) / 100. Ma trận trong định nghĩa box thực hiện cả hai thao tác mà không viết lại dữ liệu đường dẫn:

matrix(0.01 0 0 0.01 -0.2 -0.1)

Nó ánh xạ (20, 10) thành (0, 0) và (120, 110) thành (1, 1). Chia cho 100 mà không trừ gốc tọa độ sẽ khiến hình lệch trong đối tượng đích. Ánh xạ hộp giới hạn sau đó co giãn kết quả chuẩn hóa độc lập theo chiều rộng và chiều cao đối tượng đích.

Dùng giới hạn thực tế của hình học muốn chuẩn hóa. viewBox có thể chứa khoảng trắng có chủ đích, nên kích thước không nhất thiết bằng giới hạn đường bao. Nếu muốn giữ khoảng trắng đó, chủ động dùng hình chữ nhật viewBox thay vì vô tình trộn hai phép đo.

Với hình nhập có phép biến đổi lồng nhau, hãy đo và chuẩn hóa trong một hệ tọa độ nhất quán. Xử lý các phép biến đổi trong trình chỉnh sửa trước khi sao chép dữ liệu đường dẫn thô nếu bạn không tự tin tính đủ chúng. Quy trình chỉnh sửa SVG trình bày kiểm tra đường dẫn và nhóm trước bàn giao.

Giữ tỷ lệ bằng một hệ số co giãn

Với hình chữ nhật đích tại tọa độ cục bộ (0, 0), rộng W và cao H, dùng:

s  = min(W / width, H / height)
tx = (W - s * width) / 2 - s * minX
ty = (H - s * height) / 2 - s * minY
matrix(s 0 0 s tx ty)

Đối tượng rộng cho s=1.2, tx=16 và ty=-12. Vùng cắt chiếm x=40..160 và y=0..120. Đối tượng cao cho s=1.2, tx=-24 và ty=28, đặt vùng cắt tại x=0..120 và y=40..160.

Đây là các ma trận được chỉ định tường minh trong userSpaceOnUse, nên tính lại khi kích thước cục bộ của đối tượng đích đổi. Chỉ hiển thị toàn bộ SVG ở kích thước CSS khác sẽ co giãn bố cục cùng nhau. Đổi hình chữ nhật từ rộng sang cao bên trong là thao tác khác.

Phép tính này giả định chiều rộng và cao nguồn khác không, và không có phép xoay hoặc nghiêng chưa được tính. Đây là thao tác làm vừa bên trong: chừa chỗ là kết quả dự kiến. Kéo giãn bằng đơn vị hộp giới hạn phù hợp khi lấp đầy đối tượng quan trọng hơn giữ tỷ lệ họa tiết.

Giữ lỗ trong hình học cắt

Ví dụ đặt clip-rule="evenodd" trên từng use trong clipPath. Đường dẫn được tham chiếu chứa cả dấu trang ngoài và đường dẫn con hình thoi. Quy tắc quyết định vùng nào của hình phức hợp thuộc bên trong vùng cắt.

Đặt clip-rule lên hình chữ nhật xanh cổ vịt không đặt quy tắc của hình cắt. Tương tự, fill-rule dùng tô nguồn không thay thế quy tắc cắt. Tài liệu clip-rule của MDN giải thích phạm vi trong clipPath.

Đừng thêm hình thoi trắng riêng rồi mong nó trừ khỏi vùng cắt. Các đường bao con trong đường dẫn cắt được kết hợp thành vùng hiển thị; màu tô không hoạt động như giá trị mặt nạ đen-trắng. Với lỗ như ở đây, dùng đường dẫn phức hợp và quy tắc chiều quấn dự định. Hướng dẫn lỗ SVG bị tô kín giải thích cấu trúc đường dẫn bên dưới.

Nếu thiết kế cần mép trong suốt một phần hoặc hiển thị theo độ chói, hãy đối chiếu clipPath và mặt nạ SVG trên cùng ảnh. Vùng cắt hữu ích cho ranh giới hình học; mặt nạ cung cấp mô hình hiển thị khác. Với biểu tượng một màu được tô qua CSS, xem hướng dẫn mặt nạ CSS SVG.

Kiểm tra giới hạn và kết quả xuất

Đoạn thẳng ngang hoặc dọc có thể có hộp giới hạn hình học cao bằng không hoặc rộng bằng không dù đường viền nhìn thấy. Tránh objectBoundingBox cho các đối tượng đó, và đừng chia cho kích thước nguồn bằng không khi chuẩn hóa. Đặc tả tọa độ SVG loại chiều rộng đường viền khỏi phép tính hộp giới hạn này và cảnh báo các trường hợp suy biến đó.

Trước khi bàn giao:

1. Xác nhận ID vùng cắt được tham chiếu tồn tại và duy nhất trong tài liệu.
2. Đối chiếu đối tượng rộng và cao, gồm cả lỗ nhỏ nhất.
3. Kiểm tra giới hạn nguồn và đích trong các hệ tọa độ dự định.
4. Lưu và mở lại SVG đã xuất trong ứng dụng sẽ tiếp nhận.
5. Giữ hình học gốc khi vùng cắt cần còn chỉnh sửa được.

Đặc tả CSS Masking nêu rằng cắt vùng đổi kết xuất, không đổi hình học vốn có của phần tử. Vì vậy, máy cắt hoặc ứng dụng xử lý hình học có thể cần phép giao đường dẫn thực sự hoặc thao tác khác trong trình chỉnh sửa. Xác nhận các đường dẫn kết quả trong ứng dụng đó; chỉ xem trước đúng trong trình duyệt không xác nhận tệp sẵn sàng để cắt.

Khôi phục đường bao raster khi cần

PerfectVector phù hợp khi họa tiết tùy chỉnh chỉ còn PNG hoặc JPG và bạn cần đường bao chỉnh sửa được cho vùng cắt. Chuyển ảnh đó thành SVG, rồi kiểm tra mép ngoài, các lỗ trong và hình nền không mong muốn trước khi trích đường bao. Chọn đường bao nào thuộc vùng cắt; màu nguồn không định nghĩa các mức cắt khác nhau.

Giữ bản gốc vector nếu có. Dấu trang hình học đơn giản có thể vẽ trực tiếp như ví dụ này. Vector hóa không chọn đơn vị cắt, chuẩn hóa giới hạn hay thực hiện cắt Boolean vĩnh viễn. Để có hướng dẫn chọn nguồn rộng hơn, đọc tổng quan vector hóa ảnh.

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

objectBoundingBox có giữ tỷ lệ hình không? Không. Nó ánh xạ vùng cắt chuẩn hóa độc lập theo chiều rộng và chiều cao đối tượng đích. Dùng tỷ lệ đồng đều trong userSpaceOnUse khi đường bao phải giữ tỷ lệ.

Vì sao đổi clipPathUnits làm hình biến mất? Tọa độ đường dẫn có thể vẫn ở đơn vị nguồn ban đầu. Chuẩn hóa về hệ tọa độ tương đối với đối tượng đích, kể cả gốc nguồn, hoặc giữ userSpaceOnUse và đặt vị trí cụ thể.

Cắt vùng có xóa các phần SVG bị ẩn không? Không. Cắt vùng thay đổi phần được kết xuất nhưng giữ hình học bên dưới. Dùng thao tác chỉnh đường dẫn phù hợp nếu tệp bàn giao cần đường bao được cắt vĩnh viễn.

Nguồn tham khảo

1. MDN — clipPathUnits — Lựa chọn tọa độ và cách hiểu không gian người dùng mặc định.
2. MDN — clip-rule — Vị trí đặt quy tắc chiều quấn trong đường dẫn cắt.
3. W3C — Hệ tọa độ SVG — Ánh xạ hộp giới hạn, loại đường viền và giới hạn với kích thước bằng không.
4. W3C — CSS Masking — Hình học cắt, đường bao kết hợp và đường dẫn bên dưới không đổi.

Nếu vùng cắt bắt đầu từ họa tiết raster, hãy chuẩn bị SVG bằng PerfectVector, kiểm tra đường bao và lỗ, rồi thử cả hai tỷ lệ đối tượng đích trước khi chọn kéo giãn hay làm vừa đồng đều.