Viền chấm SVG: điều khiển khoảng cách và đầu tròn

Để tạo đường viền chấm SVG, thêm đường viền cho hình, đặt stroke-linecap="round" và dùng nét gạch dài bằng không theo sau bởi khoảng cách dương, chẳng hạn stroke-dasharray="0 20". Độ rộng đường viền điều khiển đường kính chấm. Số thứ hai trong dash-array điều khiển khoảng cách dọc đường dẫn giữa tâm các chấm; nó không phải khoảng trống giữa các mép nhìn thấy.

Sự khác biệt đó quan trọng khi viền trông dày đặc sau khi bo tròn đầu nét. Huy hiệu khép kín thêm một vấn đề: chu kỳ lặp có thể đến điểm bắt đầu với khoảng còn dư ngắn hơn. Các ví dụ bên dưới tách hình dạng đầu nét, khoảng cách nhìn thấy và đoạn khép để bạn điều chỉnh đúng giá trị.

Đây là cài đặt trang trí đường viền. Chúng không tạo đường bao offset mới hoặc biến từng chấm được vẽ thành đường cắt riêng.

So sánh đầu bằng, đầu tròn và chấm

stroke-dasharray luân phiên độ dài nét được vẽ và khoảng trống không vẽ. Danh sách hai số giúp chu kỳ đó dễ kiểm tra. Tài liệu dash-array của MDN cũng giải thích cách danh sách có số mục lẻ lặp lại để tạo chuỗi có số mục chẵn.

Sao chép SVG độc lập này vào tệp và mở trong trình duyệt. Mỗi đường dẫn gốc dài 240 đơn vị, với đường viền rộng 8:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

Hàng đầu dùng 12 20 với đầu bằng. Các nét đầy đủ chiếm 12 đơn vị, để 20 đơn vị khoảng trống nhìn thấy. Hàng thứ hai dùng cùng số với đầu tròn. Mỗi đầu kéo dài 4 đơn vị vượt điểm cuối của nét bên dưới, nên nét đầy đủ chiếm 20 đơn vị và khe hở nhìn thấy giảm còn 12.

Hàng thứ ba đổi độ dài nét thành không. Đầu tròn tạo chấm có đường kính 8 và tâm cách nhau 20 đơn vị trên đường thẳng này. Khe hở mép tới mép nhìn thấy là 12 đơn vị. Quy tắc tô/vẽ SVG của W3C xác định đầu ở cuối nét gạch, bao gồm cách xử lý nét dài bằng không; tài liệu đầu nét của MDN giải thích hình học đầu nét.

Với các nét đầy đủ, tách nhau trên đoạn thẳng không hiệu chỉnh khoảng cách hoặc biến đổi, các phép tính hữu ích là:

• Đầu bằng: độ dài nét nhìn thấy = dash; khe hở nhìn thấy = gap.
• Đầu tròn: độ dài nét nhìn thấy = dash + stroke-width; khe hở nhìn thấy = gap - stroke-width.
• Chấm tròn: đường kính = stroke-width; khoảng cách tâm = gap; khe hở nhìn thấy = gap - stroke-width.

Nếu phép tính cuối bằng không hoặc âm, các chấm chạm hoặc chồng nhau. Ở đoạn uốn, khoảng cách dọc đường dẫn khác khoảng cách trực tiếp giữa chấm. Kiểm tra góc và đường cong thay vì áp dụng phép tính khe hở đường thẳng cho toàn bộ viền.

Căn chu kỳ quanh huy hiệu khép kín

Các đường dẫn huy hiệu chữ nhật dưới đây đều có kích thước 180 × 120 đơn vị. Chu vi là 2 × (180 + 120) = 600. Đường dẫn bắt đầu ở góc trên trái và chạy theo chiều kim đồng hồ.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

Bên trái, 0 32 đặt tâm chấm tại khoảng cách dọc đường dẫn 0, 32, 64, tiếp tục tới 576. Chỉ còn 24 đơn vị trước khi đường dẫn trở về điểm đầu. Khoảng khép ngắn hơn các khoảng 32 đơn vị khác nên đoạn nối không đều. Tăng kích thước hiển thị SVG làm phóng đại sự lệch đó mà không giải quyết được.

Bên phải, 0 30 chia chu vi thành 20 khoảng bằng nhau. Trong hình chữ nhật cụ thể này, độ dài cả hai cạnh cũng chia hết cho 30 nên các góc trùng với chấm. Dọc mỗi cạnh thẳng, chấm 8 đơn vị để 22 đơn vị khoảng trống nhìn thấy. Cách này sửa chu kỳ của huy hiệu đã chọn; nó không cam kết khoảng cách thị giác giống hệt trên mọi đường bao cong.

Với đường bao của bạn, chọn số chấm mong muốn và chia chu vi đường dẫn cho số đó để có khoảng lặp ban đầu. Sau đó kiểm tra kết quả hiển thị thực tế, đặc biệt các đoạn uốn, chi tiết nhỏ và điểm khép. Hình có nhiều đường dẫn con không nối nhau cần chú ý riêng vì mẫu nét bắt đầu lại ở mỗi đường dẫn con, như đặc tả tô/vẽ SVG mô tả.

stroke-dashoffset di chuyển vị trí bắt đầu của mẫu dọc đường dẫn. Nó có thể đặt đoạn nối dễ thấy vào chỗ ít gây chú ý hơn, nhưng không giúp chu vi 600 đơn vị chia hết cho chu kỳ 32 đơn vị. Dùng chu kỳ được căn khớp khi mục tiêu là khép nhất quán. Tài liệu dash-offset của MDN mô tả điều chỉnh pha đó.

Chúng tôi mở độc lập cả hai tệp SVG và kiểm tra cách hiển thị trong trình duyệt so với phép so sánh này. Ví dụ dùng giá trị không đơn vị, không hiệu chỉnh pathLength, không transform và không CSS bên ngoài. Chúng minh họa các đường dẫn viết thủ công này, không phải chuyển đổi PerfectVector hoặc kiểm tra tương thích giữa ứng dụng.

Giữ kích thước và cài đặt tô/vẽ nhất quán

Bắt đầu với giá trị số trong tọa độ riêng của SVG như trên. Đừng thay bằng phần trăm và cho rằng chúng biểu diễn cùng tỷ lệ của chu vi đường dẫn. Tài liệu dash-array mô tả cách phân giải phần trăm theo khung nhìn thay vì độ dài đường dẫn.

Nếu dùng pathLength để chuẩn hóa khoảng cách, tính mẫu nét trong hệ khoảng cách đã hiệu chỉnh đó. Tránh trộn chu vi chưa hiệu chỉnh của ví dụ này với giá trị nét chuẩn hóa từ đoạn mã khác. Hướng dẫn chuyển động đường viền SVG cho thấy cách dùng hiệu chỉnh độ dài đường dẫn có sẵn trong SVG để làm hình xuất hiện như đang được vẽ.

Đặt fill="none" khi chỉ muốn viền. Vùng tô vẫn có thể nhìn thấy ngay cả khi một phần đường viền có dạng nét đứt. Nếu chấm dự kiến biến mất, xác nhận phần tử có đường viền nhìn thấy được và quy tắc CSS không ghi đè thuộc tính trình bày. Danh sách kiểm tra đường viền bị thiếu trình bày những bước đó trước khi bắt đầu đổi khoảng cách.

Để đủ khoảng trống quanh hình học cho đường viền. Đường viền 8 đơn vị mở rộng ra ngoài đường dẫn, và đầu tròn mở rộng vượt các đầu mở. Ví dụ có lề để chấm không bị khung nhìn cắt. Thử SVG bàn giao ở kích thước hiển thị thực tế; chấm nhỏ nhìn riêng biệt trong bản xem trước phóng lớn có thể khó thấy trong biểu tượng.

Tách chuẩn bị hình khỏi thiết kế viền

Nếu họa tiết bên trong huy hiệu chỉ có dạng PNG hoặc JPG, quy trình ảnh sang vector của PerfectVector có thể chuẩn bị hình SVG chỉnh sửa được cho họa tiết đó. So sánh dáng bao ngoài, khoảng trống nhỏ và vùng riêng với ảnh gốc trước khi đặt vào viền. Giữ đường bao trang trí thành hình riêng để có thể đổi độ rộng đường viền và khoảng cách chấm độc lập.

Giữ bản vector gốc nếu có. Hình chữ nhật hoặc viền đơn giản khác thường dễ vẽ trực tiếp trong trình chỉnh sửa. Vector hóa không tự thiết kế viền offset, khôi phục một đường tâm hay chọn khoảng cách nét. Nếu biểu trưng dày được đồ lại có hai ranh giới, hướng dẫn SVG một đường giải thích vì sao điều đó khác với một đường vẽ duy nhất.

Với quy trình cắt, đừng mặc định máy sẽ hiểu phần tô/vẽ trang trí đường viền thành từng đường cắt hình chấm. Chuẩn bị hình học dự định trong trình chỉnh sửa và kiểm tra bản xem trước của ứng dụng đích. Bài viết này thử cách vẽ trong trình duyệt, không thử hành vi máy cắt. Các hướng dẫn chỉnh sửa trong blog trình bày những quyết định chuẩn bị tệp liên quan.

Kiểm tra đường viền cuối

Trước khi chấp nhận tệp, kiểm tra riêng đường mở ngắn và viền khép kín. Xác nhận kiểu đầu, độ rộng đường viền và các số chu kỳ; rồi kiểm tra dấu đầu và cuối trên đường mở cùng đoạn nối quanh đường khép. Kiểm tra đường cong gắt ở kích thước sẽ dùng hình.

Mở lại SVG đã lưu trong ứng dụng đích dự định. Nếu cần phần tô/vẽ trang trí chỉnh sửa được, giữ thuộc tính đường viền. Nếu ứng dụng đích cần đường bao cố định, thực hiện và xác minh việc chuyển đổi đó như bước chỉnh sửa riêng. Giữ bản nguồn chỉnh sửa được để có thể sửa khoảng cách về sau.

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

Vì sao các nét trông gần nhau hơn sau khi chọn đầu tròn? Đầu tròn mở rộng vượt cả hai đầu nét. Trên đoạn thẳng, khe hở nhìn thấy giữa các nét đầy đủ bằng khoảng cách được chỉ định trừ độ rộng đường viền, miễn là các dấu vẫn tách nhau.

Tôi tạo chấm tròn thay vì nét ngắn dạng viên thuốc thế nào? Dùng nét dài bằng không, khoảng cách dương và đầu tròn. Ví dụ, đường viền rộng 8 với stroke-dasharray="0 20" tạo chấm 8 đơn vị có tâm cách nhau 20 đơn vị trên đường thẳng.

Vì sao một khe hở khác biệt quanh đường bao khép kín? Chu kỳ có thể không chia đều chu vi. Căn chu kỳ theo độ dài đường dẫn, rồi kiểm tra điểm khép và góc. Di chuyển dash offset thay đổi pha mẫu nhưng không sửa sự lệch trong phép tính.

Nguồn tham khảo

1. MDN — stroke-dasharray — Xác định danh sách nét và khoảng cách luân phiên cùng cách xử lý giá trị.
2. MDN — stroke-linecap — Giải thích hình học đầu bằng, đầu tròn và hành vi độ dài bằng không.
3. W3C — tô/vẽ SVG — Quy định vẽ nét, xử lý đầu nét và mẫu trên đường dẫn con.
4. MDN — stroke-dashoffset — Xác định độ lệch dùng để dịch mẫu nét.

Nếu họa tiết huy hiệu bắt đầu từ ảnh raster, chuẩn bị một bản SVG bằng PerfectVector, kiểm tra đường bao và khoảng trống, rồi thêm viền chấm thành hình chỉnh sửa được riêng.