Đơn vị SVG Pattern: Giữ họa tiết lặp đúng kích thước

Để giữ khoảng cách lặp của pattern SVG không đổi khi thay kích thước hình, dùng patternUnits="userSpaceOnUse" cùng chiều rộng và cao ô lặp dạng số. Kiểm soát riêng phần hình bên trong ô bằng patternContentUnits hoặc viewBox của pattern.

Sự khác biệt đó quan trọng khi họa tiết nhỏ tô cả huy hiệu hẹp lẫn banner rộng. Bạn có thể muốn nhiều bản sao hơn trong banner, khe lớn hơn giữa các bản sao hoặc họa tiết kéo giãn. Mỗi mục tiêu là một lựa chọn tọa độ khác. Co giãn toàn bộ nhóm banner lại thay đổi kết quả theo cách khác.

Nếu họa tiết đã gồm đường dẫn SVG, giữ các đường dẫn đó. Vector hóa thuộc bước trước trong quy trình, khi nguồn duy nhất là ảnh raster.

Tách ô lặp khỏi phần hình

Pattern có ô chữ nhật lặp và nội dung vẽ bên trong. patternUnits kiểm soát x, y, width và height của ô. patternContentUnits kiểm soát tọa độ nội dung, trừ khi pattern có viewBox.

Với objectBoundingBox, chiều rộng .25 nghĩa là một phần tư chiều rộng hộp giới hạn của đối tượng được tô. Nó không có nghĩa là một phần tư chiều rộng họa tiết. Hình chữ nhật rộng 120 đơn vị có ô 30 đơn vị; hình rộng 240 đơn vị có ô 60 đơn vị.

Mặc định nội dung vẫn là userSpaceOnUse. Vì vậy chỉ đổi patternUnits có thể đổi khe giữa họa tiết mà vẫn giữ kích thước từng họa tiết. Chủ động đặt cả hai thuộc tính thay vì cho rằng chúng thay đổi cùng nhau.

Đối chiếu bốn phiên bản của một chiếc lá

Chúng tôi vẽ đường dẫn lá cho ví dụ này và hiển thị SVG trong trình duyệt. Cả hai hình chữ nhật đích cao 80 đơn vị; chiều rộng là 120 và 240. Ảnh chụp thêm nhãn và nền quanh các hình tự tạo đó. Đây là minh họa SVG, không phải kết quả chuyển đổi PerfectVector.

Đọc các hàng từ trên xuống:

1. Ô cố định 40 × 40 tạo ba cột trong hình chữ nhật hẹp và sáu cột trong hình rộng. Kích thước lá giữ nguyên.
2. Chiều rộng ô .25 giữ bốn cột trên cả hai đối tượng. Hình chữ nhật rộng có nhiều khoảng trống giữa lá hơn vì tọa độ lá vẫn dùng đơn vị người dùng.
3. Tọa độ nội dung theo hộp giới hạn kéo giãn lá ngang khi chiều rộng đối tượng gấp đôi. Kích thước dọc giữ nguyên vì chiều cao đối tượng không đổi.
4. Ô cố định 40 × 40 với viewBox="0 0 40 40" trở về kết quả của hàng đầu, dù patternContentUnits="objectBoundingBox" vẫn trong mã. viewBox của pattern được ưu tiên.

Mở ví dụ hoàn chỉnh

Lưu đoạn này thành pattern-units.svg và mở trực tiếp trong trình duyệt. Bốn hàng dùng cùng định nghĩa với hình, không có nhãn và nền. Mỗi cặp hình chữ nhật nằm trong nhóm tịnh tiến để gốc cục bộ có thể đối chiếu.

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

Bắt đầu với pattern fixed và chỉ đổi chiều rộng hình chữ nhật thứ hai. Sau đó kiểm tra tile và both trước khi đổi đường dẫn. Điều này tách lựa chọn tọa độ khỏi chính phần hình. Với thay đổi đường dẫn và màu rộng hơn, dùng hướng dẫn chỉnh sửa SVG.

Dùng viewBox khi họa tiết có tọa độ riêng

viewBox của pattern cho phép lá giữ vùng vẽ quen thuộc trong khi ô có kích thước riêng. Đặc tả pattern SVG làm vùng vẽ đó vừa vào ô bằng viewBox và preserveAspectRatio.

Ở hàng cuối, cả ô và viewBox đều là 40 × 40 nên không lệch tỷ lệ. Nếu sau đó đổi ô thành chữ nhật, mặc định preserveAspectRatio="xMidYMid meet" giữ tỷ lệ họa tiết và căn giữa vùng vẽ đã làm vừa. preserveAspectRatio="none" cho phép tỷ lệ ngang và dọc độc lập. Chỉ chọn khi chủ động muốn biến dạng.

Đổi patternContentUnits không sửa kích thước khi pattern có viewBox: thuộc tính đó không có tác dụng trong trường hợp này. Đổi kích thước ô, viewBox hoặc quy tắc tỷ lệ của nó tùy phần cần thay đổi.

Pattern hữu ích khi một định nghĩa cần tạo màu tô lặp. Nếu thay vào đó cần các bản sao đặt riêng, symbol SVG và các bản thể use phù hợp trực tiếp hơn.

Đổi cỡ hình chữ nhật khác với co giãn nhóm

userSpaceOnUse cố định khoảng cách theo tọa độ người dùng, không phải pixel màn hình vĩnh viễn. Phép biến đổi có thể co giãn các tọa độ đó, gồm màu tô pattern.

Chúng tôi cũng mở hai phiên bản với định nghĩa fixed phía trên. Hình chữ nhật đầu có width="240". Hình thứ hai giữ width="120" trong nhóm có transform="translate(20 120) scale(2 1)". Cả hai chiếm 240 đơn vị màn hình trong tài liệu đó, nhưng hình đầu hiện sáu cột lá còn hình đã biến đổi hiện ba cột kéo giãn ngang.

Dùng sự phân biệt này khi xử lý hình đáp ứng kích thước màn hình:

• Để lộ thêm lần lặp, mở rộng hình học đối tượng đích trong khi giữ tỷ lệ tọa độ không đổi.
• Để phóng lớn toàn bộ bố cục, co giãn nhóm và dự kiến diện mạo pattern cũng co giãn.
• Nếu bố cục trang đổi kích thước hiển thị SVG gốc, kiểm tra ánh xạ viewBox gốc trước khi quy lỗi cho thuộc tính pattern.

Đặc tả hệ tọa độ SVG mô tả phép biến đổi áp dụng lên tọa độ người dùng. Với sai khác giữa ứng dụng, trước tiên kiểm tra kích thước tài liệu SVG; riêng đơn vị pattern không xác định kích thước đầu ra vật lý.

Chuẩn bị họa tiết tùy chỉnh trước khi lặp

Nếu họa tiết chỉ có PNG hoặc JPG, PerfectVector có thể khôi phục hình học SVG cho phần lặp. Chuyển họa tiết thành vector, mở kết quả trong trình chỉnh sửa và kiểm tra đường bao, khe nhỏ, hình nền không mong muốn trước khi đặt vào pattern.

Giữ bản gốc SVG riêng của họa tiết. Dựng ô quanh một bản sao, rồi thử cả đối tượng hẹp và rộng. Hình vector sẵn có có thể đi thẳng vào bước chỉnh sửa này. Biểu trưng hình học đơn giản có thể vẽ lại thủ công nhanh hơn, còn ảnh chụp có thể nên giữ ở dạng ảnh thay vì dò nét thành bộ đường dẫn phức tạp.

Hiển thị trong trình duyệt không xác nhận mọi ứng dụng thiết kế giữ định nghĩa pattern. Mở lại tệp đã lưu tại đích thực tế và kiểm tra khoảng cách lặp cùng hình dạng họa tiết ở đó. Màu tô lặp cũng không tạo bản sao chỉnh sửa độc lập cho mỗi lá nhìn thấy. Hướng dẫn tệp SVG giải thích vì sao cấu trúc tài liệu quan trọng bên cạnh diện mạo.

Trước khi bàn giao, kiểm tra mỗi fill="url(#...)" trỏ đến ID pattern hiện có, duy nhất, ô có kích thước dương và họa tiết vừa ô dự định. Pattern SVG thường cắt nội dung tại ranh giới ô, nên lá vượt mép cần thiết kế lặp có chủ đích thay vì cho rằng phần tràn sẽ xuất hiện.

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

Vì sao khoảng cách đổi nhưng lá vẫn cùng kích thước? patternUnits kiểm soát kích thước ô, còn patternContentUnits kiểm soát tọa độ phần hình. Ô theo hộp giới hạn với nội dung không gian người dùng mặc định có thể đổi khoảng cách mà không đổi cỡ lá.

Vì sao patternContentUnits dường như không làm gì? Kiểm tra viewBox trên pattern. Khi có, nó định nghĩa ánh xạ tọa độ nội dung và patternContentUnits không có tác dụng.

userSpaceOnUse có giữ pattern cùng kích thước trên màn hình không? Nó giữ kích thước ô dạng số trong hệ tọa độ người dùng hiện tại của đối tượng đích. Co giãn nhóm hoặc đổi ánh xạ tọa độ sang khung nhìn của SVG gốc vẫn có thể đổi kích thước hiển thị của pattern.

Nguồn tham khảo

1. MDN — patternUnits — Định nghĩa tọa độ hình học ô và mặc định theo hộp giới hạn.
2. MDN — patternContentUnits — Định nghĩa tọa độ nội dung và việc viewBox ghi đè.
3. W3C — Pattern SVG — Giải thích cách làm vùng vẽ vừa ô lặp, cách xử lý tỷ lệ và cắt pattern.
4. W3C — Hệ tọa độ SVG — Định nghĩa phép biến đổi tọa độ người dùng phía sau co giãn nhóm.

Bạn có họa tiết chỉ ở dạng raster cần tái sử dụng? Biến ảnh thành đường dẫn SVG, kiểm tra đường bao khôi phục và thử ở cả hai kích thước đích trước khi dựng mẫu lặp hoàn chỉnh.