Lệnh đường dẫn SVG tương đối: Theo dõi điểm hiện tại

Các lệnh đường dẫn SVG tuyệt đối như M, L và C dùng vị trí trong hệ tọa độ người dùng hiện tại. Dạng tương đối của chúng, m, l và c, dùng độ lệch so với điểm hiện tại. Để đọc hoặc viết lại một đường dẫn, hãy theo dõi điểm này sau mỗi đoạn. Đổi chữ cái của lệnh mà không đổi các số có thể làm thay đổi hình dạng.

Hai quy tắc thường gây nhầm lẫn: cặp đầu tiên của lệnh m mở đầu hoạt động như một phép di chuyển tuyệt đối, còn các cặp tiếp theo là những đoạn thẳng tương đối; và Z hoặc z đóng một đường dẫn con rồi đặt lại điểm hiện tại về điểm bắt đầu của nó. Phép di chuyển tương đối mới sau khi đóng sẽ dùng điểm đã đặt lại đó.

Đọc riêng vị trí và độ lệch

Đặc tả đường dẫn W3C định nghĩa một đường dẫn thông qua điểm hiện tại, các đường dẫn con và lệnh vẽ. Tọa độ được tính bằng đơn vị người dùng SVG, không nhất thiết là pixel trên màn hình. viewBox hoặc phép biến đổi có thể ánh xạ chúng sang một vị trí hiển thị khác.

Bắt đầu tại (40, 40), hai lệnh sau mô tả cùng một đoạn thẳng:

L180 40
l140 0

Lệnh đầu chỉ định điểm cuối (180, 40). Lệnh thứ hai cộng (140, 0) vào (40, 40). Cả hai đều kết thúc tại (180, 40), và đây trở thành điểm hiện tại cho đoạn tiếp theo.

Ngược lại, l180 40 cộng (180, 40) và kết thúc tại (220, 80). Lệnh đúng cú pháp nhưng vẽ một đoạn thẳng khác.

Z viết hoa và viết thường có cùng tác dụng: chúng không nhận tham số tọa độ. Tài liệu tham khảo về d của MDN liệt kê các lệnh cùng tham số riêng của từng lệnh.

Đối chiếu hai cách mô tả cùng một hình tự tạo

Lưu SVG hoàn chỉnh này thành absolute.svg và mở trong trình duyệt. Nó gồm một huy hiệu phức hợp màu xanh cổ vịt có lỗ vuông và một đường cong cubic màu san hô riêng biệt:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
  <path class="badge" fill="#173b40" fill-rule="evenodd" d="M40 40L180 40L210 80L180 140L40 140Z M80 70L80 110L120 110L120 70Z"/>
  <path class="curve" fill="none" stroke="#f28567" stroke-width="6" d="M40 190C80 145 155 225 220 180"/>
</svg>

Với relative.svg, giữ nguyên kích thước SVG, viewBox và kiểu hiển thị, nhưng thay hai phần tử đường dẫn bằng các phần tử sau:

<path class="badge" fill="#173b40" fill-rule="evenodd"
  d="m40 40 140 0 30 40 -30 60 -140 0z m40 30 0 40 40 0 0 -40z"/>
<path class="curve" fill="none" stroke="#f28567" stroke-width="6"
  d="m40 190c40 -45 115 35 180 -10"/>

Chúng tôi đã hiển thị cả hai tệp gốc trong trình duyệt, bên cạnh một bản huy hiệu tuyệt đối cố ý làm sai. Bản sai chỉ đổi L180 40 đầu tiên thành l180 40; các số giữ nguyên.

Trang của chúng tôi dùng getTotalLength() và getPointAtLength() gốc của SVG để đối chiếu 301 mẫu cho mỗi đường dẫn, tại những tỷ lệ tương ứng của tổng chiều dài. Chiều dài hiển thị là 657.082 đơn vị người dùng cho mỗi huy hiệu và 189.066 cho mỗi đường cong. Chênh lệch điểm lấy mẫu lớn nhất hiển thị là 0.000000 cho cả hai cặp.

Phép đo này củng cố kết quả cho những chuỗi cụ thể này; các đỉnh đoạn thẳng và điểm cubic của chúng cũng trùng khớp theo phép tính bên dưới. Đây không phải bằng chứng rằng một phép viết lại hay công cụ chuyển đổi bất kỳ xử lý được mọi lệnh SVG. Toàn bộ phép đối chiếu dùng cùng khung nhìn không biến đổi và cùng thiết lập tô màu, đường viền.

Theo dõi m đầu tiên và các đoạn thẳng ngầm định

Huy hiệu của chúng tôi bắt đầu bằng:

m40 40 140 0 30 40 -30 60 -140 0z

Chỉ cặp đầu thực hiện phép di chuyển. Các cặp còn lại hoạt động như những đoạn l tương đối ngầm định. Định nghĩa moveto quy định rõ rằng các cặp sau vẫn là tương đối, dù m40 40 mở đầu được xem là điểm bắt đầu tuyệt đối.

Theo dõi từng cặp một:

Để đối chiếu, M viết hoa với nhiều cặp sẽ biến các cặp sau thành những đoạn L tuyệt đối ngầm định. Nó không xem mỗi cặp là một phép di chuyển mới và cũng không dùng cùng các độ lệch như ví dụ viết thường này.

Mỗi phần tử đường dẫn thiết lập chuỗi đường dẫn riêng. Đừng bắt đầu m tương đối mở đầu của nó từ điểm cuối của một phần tử đường dẫn không liên quan đứng trước.

Dùng điểm bắt đầu của đường dẫn con đã đóng cho phép di chuyển tiếp theo

Lỗ bắt đầu sau z đầu tiên:

m40 30 0 40 40 0 0 -40z

Lúc này điểm hiện tại là (40, 40), nên phép di chuyển tương đối mới cộng (40, 30) và bắt đầu lỗ tại (80, 70). Các đoạn thẳng ngầm định tiếp theo lần lượt đến (80, 110), (120, 110) và (120, 70) trước khi đóng.

Nếu nhầm lấy điểm cuối của đoạn thẳng cuối trên huy hiệu ngoài, (40, 140), làm mốc, bạn sẽ đặt phép di chuyển đó tại (80, 170). Chính thao tác đóng trước đó khiến phép tính này sai. Định nghĩa closepath đặt lại điểm hiện tại về điểm đầu của đường dẫn con hiện tại.

Cả hai đường dẫn con thuộc cùng một phần tử đường dẫn. fill-rule="evenodd" của nó khiến hình vuông bên trong trở thành một lỗ trong mẫu thử này. Giữ nguyên quy tắc tô màu và thiết lập tô màu, đường viền khi đối chiếu các cách viết lại tọa độ, để thay đổi màu tô không che khuất hình học bạn đang kiểm tra.

Đo từng điểm điều khiển cubic từ cùng một điểm bắt đầu

Đường cong riêng bắt đầu tại (40, 190):

M40 190 C80 145 155 225 220 180
m40 190 c40 -45 115 35 180 -10

Với đoạn c viết thường này, cả ba cặp đều là độ lệch từ (40, 190). Điểm điều khiển thứ hai không được đo từ điểm điều khiển thứ nhất, và điểm cuối không được đo từ điểm điều khiển thứ hai.

Sau đoạn này, cập nhật điểm hiện tại thành điểm cuối (220, 180). Một đoạn tương đối tiếp theo sẽ dùng điểm bắt đầu mới đó. Hướng dẫn đường dẫn của MDN giải thích các điểm điều khiển cubic và dạng tuyệt đối/tương đối; hướng dẫn nối Bézier trình bày riêng các tay nắm tiếp tuyến và lệnh viết tắt S.

Đừng áp dụng phép trừ tọa độ cho mọi số trong mọi lệnh. Trong một cung, bán kính, góc xoay và các cờ có vai trò khác nhau; chỉ cặp điểm cuối chuyển giữa vị trí tuyệt đối và tương đối. Đọc giải thích về cờ cung trước khi viết lại dữ liệu A hoặc a. Ví dụ này minh họa đoạn thẳng, phép di chuyển, thao tác đóng và một đoạn cubic thông thường, chứ không phải quy trình chuyển đổi đường dẫn tổng quát.

Di chuyển hình mà không nhầm vị trí với cú pháp đường dẫn

Với huy hiệu phức hợp hoàn toàn tương đối này, đổi m40 40 mở đầu thành m60 60 sẽ dịch các đỉnh đi (20, 20): các độ lệch và phép di chuyển đường dẫn con tương đối phía sau đi theo điểm bắt đầu đã đổi. Đường cong riêng vẫn giữ nguyên. Trong dữ liệu kết hợp, những vị trí tuyệt đối xuất hiện sau vẫn được neo vào tọa độ đã chỉ định, nên sửa phép di chuyển đầu tiên có thể làm méo đường dẫn.

Để di chuyển toàn bộ hình gồm hai đường dẫn như một khối, giữ nguyên hai chuỗi d và đặt các phần tử vào một nhóm có transform="translate(20 20)". Đặc tả hệ tọa độ SVG giải thích cách phép biến đổi thiết lập ánh xạ tọa độ. Phép biến đổi nhóm thay đổi vị trí mà không viết lại dữ liệu đường dẫn gốc.

Kiểm tra để khung nhìn vẫn chứa toàn bộ hình đã di chuyển; tịnh tiến một nhóm không tự động mở rộng khung vẽ. Hướng dẫn thứ tự biến đổi SVG trình bày cách đặt vị trí khi kết hợp tịnh tiến và tỷ lệ.

Kiểm tra hình học nguồn trước khi đổi cách ghi

PerfectVector có thể giúp khi hình chỉ còn ở dạng PNG hoặc JPG. Chuẩn bị một bản SVG ứng viên, rồi đối chiếu đường bao, lỗ và hình dạng đường cong được khôi phục với ảnh nguồn trước khi sửa dữ liệu đường dẫn. Cách ghi tuyệt đối hay tương đối không cho biết hình học được khôi phục có phù hợp hay không.

Dùng trực tiếp bản gốc vector sẵn có, hoặc vẽ lại biểu tượng đơn giản nếu cách đó dễ kiểm soát hơn. Viết lại lệnh không thể khôi phục hình dạng mong muốn từ thông tin raster đã mất. Tổng quan về vector hóa ảnh giải thích bước tái dựng riêng biệt đó.

Khi chỉnh sửa SVG dùng được, hãy giữ một bản sao gốc, thay từng đoạn được hỗ trợ và đối chiếu tệp thực tế ở cùng tỷ lệ. Theo dõi điểm bắt đầu đường dẫn con cùng với điểm hiện tại. Giữ nguyên thiết lập tô màu và đường viền trong khi đối chiếu, rồi kiểm tra tệp xuất trong ứng dụng tiếp nhận.

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

m viết thường đầu tiên có tương đối với một đường dẫn khác không? Không. Khi m là lệnh đầu tiên của một đường dẫn, cặp đầu được xem là điểm bắt đầu tuyệt đối. Các cặp bổ sung là những đoạn thẳng tương đối ngầm định, và điểm cuối của một phần tử đường dẫn khác không phải mốc bắt đầu của nó.

Điểm hiện tại ở đâu sau Z hoặc z? Ở điểm bắt đầu của đường dẫn con vừa đóng. Phép di chuyển tương đối tiếp theo dùng điểm đã đặt lại đó, không dùng điểm cuối của đoạn thẳng trước.

Tôi có thể chuyển đổi đường dẫn bằng cách viết thường các lệnh không? Không. Các giá trị vị trí phải được tính lại theo ý nghĩa của từng lệnh. L180 40 trong ví dụ này trở thành l140 0 từ điểm hiện tại (40, 40), còn l180 40 vẽ một đoạn thẳng khác.

Nguồn tham khảo

1. W3C — Đường dẫn SVG 2 — Định nghĩa điểm hiện tại, moveto mở đầu, đoạn thẳng ngầm định, thao tác đóng và tham số cubic.
2. MDN — Hướng dẫn đường dẫn — Minh họa lệnh đoạn thẳng và đường cong tuyệt đối, tương đối.
3. MDN — Thuộc tính d — Liệt kê vai trò tham số của các lệnh, gồm cung và closepath.
4. W3C — Hệ tọa độ SVG 2 — Giải thích ánh xạ tọa độ người dùng và cách đặt vị trí hình bằng phép biến đổi.

Bạn bắt đầu với hình chỉ có dạng raster? Chuẩn bị đường dẫn SVG bằng PerfectVector, kiểm tra đường bao và các lỗ được khôi phục, rồi chỉ chỉnh sửa những lệnh bạn hiểu và xác minh SVG bàn giao so với bản gốc.