Biến đổi họa tiết SVG: xoay màu tô, giữ đường viền

Để xoay họa tiết SVG bên trong một hình cố định, đặt patternTransform="rotate(...)" trên phần tử pattern. Giữ nguyên biến đổi của chính hình. Để dịch vị trí hình lặp, thay vào đó dùng phép tịnh tiến trên cùng họa tiết.

Các chỉnh sửa này di chuyển hệ tọa độ màu tô. Xoay nhóm chứa hình cũng di chuyển hình học được hiển thị. Biểu trưng rỗng gốc của chúng tôi làm rõ khác biệt: đường viền vẫn thẳng đứng khi màu tô xoay, còn đối chứng toàn đối tượng riêng làm nghiêng biểu trưng cùng khoảng trống.

Chọn phần tử cần di chuyển

Tài liệu tham khảo patternTransform hiện tại mô tả danh sách biến đổi áp dụng cho ô họa tiết. Định nghĩa họa tiết SVG2 giải thích hệ tọa độ của ô và biến đổi màu tô.

Trong ví dụ này, mô típ là một dấu gấp khúc nhỏ bất đối xứng được lặp trong ô 24 đơn vị. Hình nhận màu tô là đường dẫn khác: huy hiệu bất đối xứng có khoảng trống chữ nhật. Tách các vai trò này giúp quyết định chỉnh sửa rõ hơn.

Chúng tôi dùng thuộc tính SVG trực tiếp. Ghi chú MDN về triển khai CSS transform không hứa rằng thuộc tính CSS tên pattern-transform sẽ hoạt động ở đích của bạn.

Xoay màu tô bên trong đường viền

Mở mã khởi đầu xoay màu tô hoàn chỉnh

Lưu SVG này thành pattern-emblem.svg và mở trong trình duyệt. Tệp độc lập, không có ảnh hay thư viện ngoài. Họa tiết xoay 30 độ quanh điểm nguồn (100,80); nhóm nhận màu không có biến đổi.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>

Quy tắc tô evenodd để hình chữ nhật trong mở. Xem tài liệu tham khảo fill-rule về quy tắc dựa trên giao cắt. Khoảng trống thuộc đường dẫn biểu trưng, nên xoay màu tô lặp không xoay khoảng trống đó.

Cả patternUnits và patternContentUnits đều được đặt tường minh trong nguồn này. Tài liệu tham khảo patternUnits định nghĩa hệ tọa độ ô. Hướng dẫn đơn vị họa tiết trình bày chi tiết kích thước ô và tọa độ mô típ. Ở đây chúng tôi giữ chúng cố định để cô lập biến đổi; đây không phải công thức thiết kế mẫu lặp liền mạch.

So sánh xoay, tịnh tiến và đối chứng hình học

Tạo ba bản sao mã khởi đầu và chỉ đổi thuộc tính được chỉ ra:

1. Với màu tô gốc, xóa patternTransform khỏi họa tiết.
2. Với màu tô dịch chuyển, thay bằng patternTransform="translate(7 5)".
3. Với đối chứng toàn đối tượng, xóa biến đổi họa tiết và thêm transform="rotate(20 100 80)" vào phần tử g nhận màu.

Bản sao tịnh tiến giữ hướng mô típ nhưng đổi nơi nó rơi vào bên trong huy hiệu. Một dấu tại ranh giới có thể đi vào hoặc ra khỏi hình được tô. Bản sao xoay xoay mô típ và lưới lặp cùng nhau; nó không chỉ xoay từng mô típ quanh tâm riêng.

Với đối chứng đối tượng, tài liệu tham khảo thuộc tính transform mô tả xoay quanh điểm được chọn. Biến đổi đó thay cách hình học của nhóm được hiển thị. Màu tô họa tiết thông thường đi cùng nó; đơn vị họa tiết không gian người dùng không làm màu tô ví dụ này đứng yên trên toàn cục.

Bắt đầu với một biến đổi khi chẩn đoán kết quả. Nếu về sau kết hợp xoay, tịnh tiến và co giãn, kiểm tra thứ tự trong hướng dẫn thứ tự biến đổi SVG. Kết hợp biến đổi đưa vào vấn đề tọa độ riêng mà phép so sánh có kiểm soát này tránh.

Xác minh hình học và pixel riêng

Chúng tôi kết xuất bốn biến thể gốc trong Chrome ở 200×160 và 400×320 pixel CSS. Tỷ lệ pixel thiết bị của trình duyệt là 2. Mỗi nguồn cũng được giải mã và vẽ vào canvas có kích thước bộ đệm khớp kích thước thử nghiệm đã nêu, cho phép đọc pixel độc lập với ảnh chụp.

Mọi tệp chứa cùng chuỗi d biểu trưng và cùng đường dẫn mô típ: hai phần tử path, không có phần tử image. Mã băm toàn tệp khác nhau vì biến đổi khác nhau. Hộp hình học cục bộ của biểu trưng là (30,25,140,110) trong mọi trường hợp.

Chỉ hộp cục bộ sẽ bỏ sót thay đổi toàn đối tượng. Với biểu trưng đa giác này, chúng tôi cũng biến đổi năm đỉnh ngoài qua ma trận trình duyệt thực và đo phạm vi hiển thị. Bảng chuẩn hóa khung nhìn lớn hơn về đơn vị nguồn:

Các phạm vi chuẩn hóa khớp ở cả hai kích thước được thử. Đối chứng đối tượng giữ cùng chuỗi d nhưng hình học hiển thị thay đổi. Vì vậy dữ liệu nguồn bằng nhau là bằng chứng hữu ích rằng cấu trúc đường dẫn được giữ, nhưng không đủ chứng minh đường viền nhìn thấy vẫn đứng yên.

Với các biến thể chỉ đổi màu tô, toàn bộ bộ đệm pixel canvas khác bản gốc ở mỗi kích thước. Tại điểm nguồn (45,45), mẫu gốc là nền ô (244,240,228) và mẫu màu tô xoay là mô típ đất nung (193,90,56), cả hai có alpha 255. Phép tịnh tiến không đổi mẫu cụ thể đó dù bộ đệm tổng thể khác. Một điểm lấy mẫu có thể bỏ sót dịch chuyển màu tô.

Tại nguồn (85,80), khoảng trống có alpha 0 trong cả tám trường hợp. Phạm vi pixel đục hoàn toàn cũng giữ nguyên cho ba biến thể thẳng đứng ở mỗi kích thước; phạm vi pixel theo ngưỡng đó không phải phép đo giống phạm vi đỉnh đường bao chính xác. Những quan sát này giới hạn trong nguồn tự tạo và trình duyệt của chúng tôi, không phải chứng chỉ tương thích bộ kết xuất.

Kiểm tra đích đã lưu trước khi bàn giao

Giữ biểu trưng gốc làm tham chiếu hình học và giữ hiệu ứng màu tô trong bản sao riêng. Nguồn tô lặp không biến mỗi mô típ nhìn thấy thành hình độc lập mà máy cắt hay trình chỉnh sửa về sau có thể chọn. Nếu đích cần hình học được mở rộng, chuẩn bị và kiểm tra việc mở rộng riêng. Hướng dẫn chỉnh sửa SVG trình bày các thay đổi nguồn rộng hơn.

Nếu đường viền xoay bất ngờ, kiểm tra biến đổi của nhóm và các phần tử cha trước khi điều chỉnh họa tiết. Nếu nhiều bản sao nội tuyến bất ngờ dùng chung một hiệu ứng màu tô, đặt tên riêng cho ID họa tiết và tham chiếu màu tô tương ứng. Mẫu so sánh của chúng tôi cô lập những ID đó; các tệp SVG độc lập riêng không dùng chung không gian tên tài nguyên cấp tài liệu ấy.

Nếu mô típ hoặc biểu trưng tùy chỉnh chỉ có dưới dạng PNG hay JPG và bạn cần đường bao chỉnh sửa được, hãy chuẩn bị SVG bằng PerfectVector, kiểm tra đường viền và khoảng trống, rồi giữ bản chính sạch. Sau đó xây dựng mẫu lặp và chọn biến đổi màu tô trong mã SVG. Vector hóa chuẩn bị hình; nó không thiết kế mẫu lặp, chọn pha hay bảo đảm cách đích xử lý họa tiết. Đường dẫn sạch có sẵn có thể đi thẳng tới chỉnh sửa họa tiết; hướng dẫn vector hóa giải thích khi nào chuyển raster hữu ích.

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

patternTransform có thay đổi dữ liệu đường dẫn biểu trưng không? Trong ví dụ này nó biến đổi màu tô họa tiết. Chuỗi d của biểu trưng giữ nguyên. Cũng kiểm tra biến đổi nhóm nhận màu và phần tử cha, vì hình học hiển thị có thể di chuyển mà không đổi d.

Tôi có thể dịch họa tiết mà không xoay không? Có. Biến thể translate(7 5) dịch vị trí màu tô trong khi giữ hướng mô típ. Giữ kích thước ô và hình học nhận màu cố định khi thử hiệu ứng.

Tại sao họa tiết cũng xoay khi tôi xoay toàn bộ nhóm? Biến đổi nhóm thay hình học nhận màu được hiển thị và màu tô của nó. Đó là thao tác khác với chỉ đặt biến đổi lên phần tử pattern.

Các mô típ lặp có phải đường dẫn riêng chỉnh sửa được không? Nguồn của chúng tôi có một đường dẫn mô típ trong nguồn tô và một đường dẫn biểu trưng nhận màu. Các bản lặp nhìn thấy không phải phần tử path được tạo riêng; mở rộng và kiểm tra riêng nếu đích yêu cầu dạng đó.

Nguồn tham khảo

1. MDN — patternTransform — Danh sách biến đổi họa tiết và ghi chú triển khai thuộc tính.
2. W3C — Họa tiết SVG2 — Hệ tọa độ ô và biến đổi màu tô.
3. MDN — fill-rule — Khoảng trống chẵn-lẻ trong đường dẫn nhận màu.
4. MDN — transform — Xoay áp dụng cho hình học nhóm hiển thị.
5. MDN — patternUnits — Hệ tọa độ ô tường minh được giữ cố định trong phép so sánh này.