Cờ cung SVG: Vẽ đường cong đúng bằng lệnh A

Hai cờ trong lệnh SVG A chọn cung nào nối điểm đầu và điểm cuối. Đặt large-arc-flag thành 0 cho đường ngắn hơn hoặc 1 cho đường dài hơn. Đặt sweep-flag thành 0 hoặc 1 để chọn hướng đi quanh elip. Giữ nguyên điểm đầu, điểm cuối và bán kính, chỉ đổi hai chữ số đó để thấy cả bốn khả năng. Đặc tả đường dẫn SVG 2 định nghĩa lựa chọn bốn cung này.

Cách này hữu ích khi mép cong của logo, vòng huy hiệu hay họa tiết giao diện uốn sai hướng sau khi sửa mã. Nếu nguồn là PNG, vector hóa có thể cung cấp hình chỉnh sửa được trước; lệnh A là bước chỉnh hình học riêng, có chủ đích.

Đọc bảy giá trị sau A

Lệnh cung tuyệt đối có thứ tự này:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx và ry là bán kính elip. x-axis-rotation xoay elip trong hệ tọa độ hiện tại. Mỗi cờ là 0 hoặc 1. Cuối cùng, x y là điểm cuối. Điểm đầu là điểm hiện tại do lệnh trước để lại, thường là M x y. Chữ thường a dùng điểm cuối tương đối thay vì tuyệt đối; hướng dẫn đường dẫn của MDN giải thích các dạng lệnh.

Ví dụ, M70 370 A140 110 0 0 1 280 420 bắt đầu tại (70, 370), dùng bán kính 140 và 110, giữ elip không xoay, chọn đường ngắn hơn với sweep 1 và kết thúc tại (280, 420). Các số nằm trong hệ tọa độ người dùng của SVG. Chúng không tự bảo đảm kích thước in vật lý.

Xem bốn cung có thể có

Chúng tôi kết xuất mẫu gốc này từ một tệp SVG. Mọi khung dùng cùng điểm đầu (70, 370), điểm cuối (280, 420), bán kính 140 110 và góc xoay 0. Chỉ các cờ thay đổi. Màu cam đánh dấu điểm đầu, xanh lá đánh dấu điểm cuối. Đây là kết xuất theo kiểu trình duyệt từ lệnh đường dẫn của chúng tôi, không phải đầu ra chuyển đổi PerfectVector.

Các nhãn “trên” và “dưới” mô tả điểm đầu, điểm cuối và bố trí tọa độ này. Chúng không phải ý nghĩa phổ quát của 0 và 1. Vị trí điểm cuối khác hoặc nhóm được biến đổi có thể đưa cung nhìn thấy sang nơi khác. Cờ sweep chọn hướng góc tăng hoặc giảm dọc elip đã chọn; trong viewBox SVG thông thường có trục y hướng xuống, sweep 1 thường trông theo chiều kim đồng hồ. Trình chỉnh sửa cung tương tác của SVG Tutorial hữu ích để quan sát hướng thay đổi khi giữ nguyên các đầu vào khác.

Để tái lập một khung, lưu đoạn này thành arc.svg rồi mở trong trình duyệt:

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

Chỉ đổi hai chữ số sau góc xoay 0, dùng bảng trên. Nếu đổi bán kính hoặc điểm cuối cùng lúc, bạn không còn biết thay đổi nào đã đổi đường đi.

Sửa đường cong đi sai hướng

1. Xác định đoạn. Trong giá trị d của đường dẫn, tìm điểm đầu từ lệnh trước, lệnh A và điểm cuối của nó. Đường dẫn có thể có nhiều đoạn cung; chỉ sửa đoạn sai.
2. Kiểm tra lựa chọn dài hay ngắn. Nếu đường cong nhỏ đột nhiên vòng quanh phần lớn elip, đổi large-arc-flag từ 1 thành 0. Nếu đoạn vòng dự định co thành đoạn nối ngắn, thử 1.
3. Kiểm tra phía hoặc hướng đi. Giữ mọi thứ khác cố định và bật/tắt sweep-flag. Việc này thường chuyển cung sang phía bên kia dây cung nối hai đầu.
4. Kiểm tra toàn bộ hình. Đoạn đã sửa vẫn có thể nối với đoạn lân cận ở góc khó coi hoặc vượt ra ngoài viewBox. Mở lại tệp ở kích thước hiển thị dự định, rồi chỉnh hình học lân cận hoặc khung vẽ khi cần.

Nếu không cặp cờ nào khớp hình bao mong muốn, vấn đề có lẽ không phải cờ. Bán kính và các điểm đầu cuối xác định những elip có thể dùng; cờ chỉ chọn trong số đó. Hướng dẫn cung của NaN minh họa cách thay bán kính hoặc điểm cuối làm thay đổi elip bên dưới.

Giới hạn góc xoay và bán kính

x-axis-rotation có ý nghĩa khi rx và ry khác nhau: nó xoay elip trước khi chọn cung. Với bán kính bằng nhau, xoay hình tròn không đổi đường bao. Với logo có mép elip nghiêng, thử bán kính và góc xoay dự định trước, rồi chọn cờ. Nếu không, bạn có thể chọn đúng phía của elip sai.

Ghi chú triển khai SVG 2 định nghĩa các trường hợp đặc biệt. Nếu một trong hai bán kính bằng không, đoạn được coi là đường thẳng. Nếu bán kính quá nhỏ để nối các điểm đầu cuối, trình kết xuất tăng chúng đủ để cung có thể tồn tại. Nếu điểm đầu và cuối trùng nhau, đoạn cung bị bỏ qua. Những quy tắc này giải thích vì sao đổi cờ đôi khi có vẻ không tác động. Chúng cũng có nghĩa là chỉ kết quả hiển thị không chứng minh bán kính bạn nhập đã được dùng mà không hiệu chỉnh.

Dùng đường cong được đồ lại làm điểm bắt đầu, không phải công thức cung

Logo raster có thể hiện đường viền tròn rõ, nhưng SVG khôi phục có thể mô tả nó bằng đoạn Bézier và điểm neo thay vì lệnh A tường minh. Công cụ vector hóa ảnh tái dựng hình nhìn thấy; nó không nhất thiết suy ra tâm đường tròn, bán kính hay cờ cung gốc của nhà thiết kế. Nếu bản vector gốc tồn tại, sửa tệp đó thay vì đồ lại.

Khi chỉ có PNG hoặc JPG, hãy chuyển ảnh thành đường dẫn vector chỉnh sửa được bằng PerfectVector, kiểm tra đường bao khôi phục, rồi quyết định có cần vẽ lại hình học chính xác không. Với vòng huy hiệu, đo tâm và bán kính dự định trong trình chỉnh sửa vector và chỉ thay phần cong đó nếu hình học nhất quán là quan trọng. Giữ kết quả đồ lại đã được chấp nhận cho hình không đều mà elip chính xác sẽ làm biến dạng. Hướng dẫn chỉnh SVG của chúng tôi trình bày lựa chọn trình chỉnh sửa trực quan hay sửa mã có chọn lọc; hướng dẫn dọn nút giúp khi đường cong đồ lại khó uốn chỉnh.

Sự phân công này quan trọng: PerfectVector có thể giúp khôi phục nguồn chỉ có raster thành đường dẫn, còn đặt thông số cung chính xác và kiểm tra mối nối vẫn là quyết định thiết kế. Đừng chuyển SVG vốn đã sạch sang PNG rồi đồ lại chỉ để đổi một cờ.

Trước khi bàn giao SVG

• Giữ bản sao của bản gốc hoặc kết quả đồ lại đã được chấp nhận.
• Xác nhận điểm đầu, điểm cuối, bán kính, góc xoay và hai giá trị cờ theo thứ tự đó.
• So sánh đường đi đã chọn ở cả mức phóng gần và kích thước sử dụng thực tế.
• Kiểm tra mối nối và xem đường dài có vượt mép viewBox không.
• Mở lại SVG bàn giao trong trình chỉnh sửa hoặc trình duyệt đích. Ảnh chụp màn hình đúng về thị giác không chứng minh người nhận có thể chỉnh đường dẫn như dự định.

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

Cờ large-arc và sweep trong SVG có nghĩa gì? Cờ large-arc chọn cung ngắn hơn hoặc dài hơn trong các cung có thể có giữa hai điểm đầu cuối. Cờ sweep chọn hướng đoạn đi quanh elip. Cùng nhau, chúng chọn một trong bốn khả năng khi hình học không suy biến.

Vì sao đổi cờ large-arc SVG không có hiệu ứng nhìn thấy? Kiểm tra xem các điểm đầu cuối có đối diện nhau trên elip khiến cả hai đường đều là nửa vòng không. Cũng kiểm tra điểm đầu cuối trùng nhau, bán kính bằng không hoặc bán kính đã được trình kết xuất điều chỉnh để nối các điểm. Đổi từng thông số một và so sánh đường dẫn được kết xuất.

Vector hóa ảnh có tự khôi phục lệnh cung gốc không? Đừng mặc định như vậy. Công cụ đồ lại có thể khôi phục hình vector chỉnh sửa được từ hình raster, nhưng kết quả có thể dùng đường cong Bézier hoặc nhiều điểm neo. Dựng lại hình tròn hoặc elip chính xác trong trình chỉnh sửa vector khi cần hình học gốc.

Nguồn tham khảo

1. W3C — Đường dẫn SVG 2 — Cú pháp cung, tổ hợp cờ và hình học đường dẫn.
2. W3C — Ghi chú triển khai SVG 2 — Hiệu chỉnh bán kính và xử lý cung suy biến.
3. MDN — Đường dẫn SVG — Lệnh đường dẫn tuyệt đối, tương đối và hướng dẫn cung.
4. SVG Tutorial — Cung — Minh họa tương tác về bán kính, góc xoay và cờ.
5. NaN — Lệnh đường dẫn SVG: Cung — Giải thích tương tác về khớp elip và kết quả của cờ.

Bạn cần nguồn chỉnh sửa được trước khi tạo hình cho biểu tượng chỉ có raster? Chuyển ảnh thành đường dẫn vector, kiểm tra kết quả và vẽ lại cung nào cần bán kính hoặc hướng quét chính xác.