Transform Origin SVG: Xoay hình quanh tâm của nó

Để xoay hình SVG quanh tâm riêng bằng CSS, đặt các đường dẫn liên quan trong một nhóm và áp dụng transform-box: fill-box cùng transform-origin: center cho nhóm đó. Sau đó áp dụng phép xoay ở đó. Hai thuộc tính trả lời hai câu hỏi khác nhau: hình chữ nhật nào làm tham chiếu và tâm xoay nằm ở đâu bên trong hình chữ nhật đó.

Nếu biểu tượng nhập vào văng đi khắp khung vẽ, kiểm tra tham chiếu đó trước khi đổi tọa độ đường dẫn. Nếu các phần xoay riêng, kiểm tra phần tử nào nhận phép biến đổi. Hình vector hiện có thường cần sửa nhóm hoặc phép biến đổi; đồ lại chỉ hữu ích khi trước hết bạn cần đường dẫn chỉnh sửa được từ nguồn raster.

Vì sao chỉ đặt center vẫn có thể làm hình di chuyển

Với phần tử con SVG thông thường như đường dẫn hoặc nhóm, gốc biến đổi mặc định là 0 0. Phần tử SVG gốc có mặc định khác. Với transform-box: view-box mặc định, đặt gốc thành center tham chiếu khung nhìn SVG thay vì giới hạn riêng của hình. Tài liệu transform-origin SVG của MDN giải thích cả mặc định và những ngoại lệ này.

Vì thế khoảng trống quanh logo có ý nghĩa. Biểu tượng nhỏ đặt về một góc của vùng vẽ lớn có tâm khác với vùng vẽ đó. transform-box: fill-box chuyển tham chiếu sang khung bao đối tượng của phần tử. Nó không cắt SVG hay xóa khoảng trống. Tài liệu transform-box định nghĩa các khung có sẵn, gồm stroke-box khi cần tham chiếu tính cả đường viền.

Xoay hai đường dẫn như một biểu tượng

Lưu ví dụ đầy đủ này thành rotation.svg rồi mở trong trình duyệt. Nó dùng hình vuông tự tạo cùng điểm nhấn tam giác tách rời, đều đặt xa gốc tọa độ. CSS nằm trong SVG để tệp độc lập mang quy tắc xoay riêng.

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

Trước khi xoay, toàn bộ hình trải từ x = 80 đến 220 và y = 50 đến 130. Khung rộng 140 đơn vị và cao 80 đơn vị, nên tâm là (150, 90). Hình vuông và điểm nhấn giữ quan hệ của chúng khi nhóm xoay.

Chúng tôi kết xuất bốn trạng thái góc cố định của cùng các đường dẫn đó trong trình duyệt, đọc hình học và mở riêng lại SVG đầy đủ trên. So sánh dùng vùng xem rộng hơn để chừa chỗ cho kết quả xoay quanh gốc mặc định. Đây là đường dẫn minh họa viết thủ công, không phải đầu ra chuyển đổi PerfectVector hay phép thử mọi trình duyệt và trình chỉnh sửa.

Phiên bản gốc mặc định đưa biểu tượng quanh (0, 0). Hai phiên bản xoay nhóm quanh tâm cho kết quả khớp nhau. Ở khung cuối, hình vuông xoay quanh (120, 90), còn điểm nhấn tam giác xoay quanh (195, 90). Mỗi phần ở gần vị trí ban đầu riêng, nhưng biểu tượng không còn xoay như một đối tượng.

Với tệp của bạn, chỉ chọn những phần cần di chuyển cùng nhau. Hình chữ nhật nền, dấu định vị hay đường dẫn rác ở xa có thể mở rộng giới hạn nhóm. Quy trình chỉnh sửa SVG trình bày kiểm tra và dọn tệp trước khi thêm hành vi.

Dùng tọa độ được chỉ định cụ thể khi tâm xoay là lựa chọn thiết kế

Thuộc tính transform SVG có thể nêu trực tiếp góc và tâm xoay. Trong ví dụ, thay <g class="artwork"> bằng <g transform="rotate(35 150 90)">. Giữ hai đường dẫn bên trong. Xóa class cũng ngăn phép biến đổi CSS ghi đè thuộc tính.

Dạng rotate(angle cx cy) của thuộc tính dùng độ, tiếp theo là tâm xoay trong hệ tọa độ người dùng hiện tại. CSS rotate(35deg) có cú pháp khác và lấy gốc từ thuộc tính riêng. Nếu cả phép biến đổi CSS và thuộc tính transform SVG nhắm cùng phần tử, CSS được ưu tiên. Xem tài liệu thuộc tính transform của MDN.

Tọa độ được chỉ định cụ thể hữu ích cho bản lề, kim hoặc tâm logo được chủ động đặt lệch. Giữ chúng trong cùng hệ tọa độ cục bộ với nhóm bạn xoay. Tọa độ đo trên màn hình không tự là tọa độ có thể dán vào nhóm SVG lồng nhau.

Nếu nhóm hiện có đã có phép biến đổi vị trí, giữ nó và đặt phép xoay trên nhóm bên trong mới chứa hình. Sau đó thử tệp xuất. Thay phép biến đổi hiện có có thể bỏ mất tịnh tiến hoặc tỷ lệ đã đặt biểu tượng vào vị trí. Nếu đổi tỷ lệ cũng làm biểu tượng dịch đi, ví dụ thứ tự biến đổi SVG cho thấy tịnh tiến và co giãn kết hợp thế nào.

Đọc giới hạn trước khi tính tâm

Với nhóm đơn giản như ví dụ này, phép tính tâm là:

cx = x + width / 2
cy = y + height / 2

Trong đo lường trình duyệt của chúng tôi, getBBox() trên nhóm trả về x: 80, y: 50, width: 140 và height: 80. Phép xoay riêng của nhóm không đổi các giá trị khung cục bộ đó. Tài liệu getBBox phân biệt những giá trị trong không gian người dùng này với getBoundingClientRect(), có hình chữ nhật tương đối với khung nhìn trình duyệt.

Với đường bao vùng chọn hoặc viewBox ôm sát, quy trình khung bao SVG cho thấy cách chuyển giữa các hệ tọa độ đó và kiểm tra khoảng chừa đường viền.

Đo phần tử bạn định xoay. Phép biến đổi của phần tử con có thể ảnh hưởng giới hạn nhóm chứa: nhóm của chúng tôi với các phần tử con xoay riêng có giới hạn khác cặp gốc. Lớp bọc, phép co giãn lồng nhau hoặc hình rác cần được kiểm tra trước khi dùng lại các số đơn giản trên.

Tâm khung không phải lúc nào cũng là tâm thị giác

Hình vuông trong ví dụ chiếm diện tích lớn hơn nhiều so với điểm nhấn tam giác. Trung điểm khung kết hợp vẫn nằm giữa mép xa nhất bên trái và bên phải. Đó là quy tắc hình học; nó không đánh giá thiết kế có trông cân bằng khi xoay hay không.

Bắt đầu từ tâm khung, kiểm tra biểu tượng ở vài góc và chuyển sang tâm chỉ định rõ nếu thiết kế cần. Kim đồng hồ thường cần điểm gắn của nó. Logo có điểm nhấn lệch tâm có thể cần tâm do nhà thiết kế chọn. Giữ quyết định đó riêng với việc sửa gốc vô tình dựa trên khung nhìn.

Xoay cũng cần không gian. Bản xuất ôm sát hình chưa xoay có thể cắt góc sau khi nó xoay. Chừa đủ chỗ trong vùng xem và kiểm tra các vùng cắt của phần tử cha. Nếu toàn bộ tệp nhập sai tỷ lệ, dùng chẩn đoán kích thước SVG trước khi đổi từng phần.

Quy trình này xoay hình hiện có mà không viết lại đường bao. Nếu mục tiêu là biến một đường bao thành đường bao khác, hướng dẫn biến hình SVG trình bày vấn đề riêng về khớp hình học đường dẫn.

Chuẩn bị nguồn trước khi đặt tâm xoay

Nếu biểu tượng chỉ có PNG hoặc JPG và bạn cần sửa các hình riêng, PerfectVector có thể giúp chuẩn bị một bản SVG để đánh giá. Chuyển hình thành vector, kiểm tra hình bao và chi tiết tách rời, rồi nhóm những phần cần xoay cùng nhau. Kiểm tra hình nền không mong muốn trước khi đo nhóm.

Bitmap có thể xoay toàn bộ mà không cần đồ lại. Dùng vector hóa khi hình học chỉnh sửa được là một phần công việc. Nếu đã có bản vector gốc dùng được, hãy giữ nó; đổi gốc biến đổi không sửa đường bao hỏng, và đồ lại bản raster thêm bước tái dựng không cần thiết.

Trước khi bàn giao, mở lại chính SVG đó ở đích đến. Xác nhận các phần dự định xoay cùng nhau, tâm vẫn nằm nơi bạn chọn và hình sau xoay có đủ chỗ. Giữ bản gốc không đổi để chỉnh sửa sau. Các bài về quy trình SVG trên blog trình bày những kiểm tra chuẩn bị và xuất liên quan.

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

Vì sao transform-origin: center xoay SVG quanh khung vẽ? Với phần tử con SVG dùng tham chiếu view-box mặc định, center chỉ tâm khung nhìn tham chiếu SVG. Đặt transform-box thành fill-box trên phần tử định xoay nếu bạn muốn dùng khung bao đối tượng của nó.

Tôi nên xoay nhóm hay từng đường dẫn? Xoay nhóm khi các phần cần di chuyển như một biểu tượng. Áp dụng fill-box và center cho từng đường dẫn cho mỗi phần tâm riêng, làm thay đổi bố trí kết hợp.

fill-box center có làm logo bất đối xứng trông cân bằng không? Nó chọn tâm khung bao đối tượng. Cân bằng thị giác có thể cần tâm khác, nên kiểm tra logo ở vài góc và chọn tọa độ cụ thể khi cần.

Nguồn tham khảo

1. MDN — transform-origin SVG — Định nghĩa gốc mặc định SVG, ngoại lệ phần tử gốc và quan hệ với khung tham chiếu.
2. MDN — transform-box — Định nghĩa khung tham chiếu đối tượng, đường viền và khung nhìn.
3. MDN — transform SVG — Mô tả tọa độ xoay được chỉ định cụ thể, phép biến đổi nhóm và độ ưu tiên CSS.
4. MDN — getBBox — Giải thích đo hình học cục bộ và khác biệt với hình chữ nhật khung nhìn.

Bạn cần hình chỉnh sửa được từ nguồn raster? Chuẩn bị SVG bằng PerfectVector, kiểm tra các phần khôi phục, rồi nhóm chúng và kiểm tra tâm đã chọn trong tệp xuất cuối.