Căn đường viền SVG: Đặt viền bên trong hoặc bên ngoài

Đường viền SVG được căn giữa trên đường dẫn. Để viền rộng 12 đơn vị nằm hoàn toàn bên trong hình khép kín, vẽ đường viền rộng 24 đơn vị rồi cắt theo hình đó. Để cùng độ rộng nhìn thấy nằm bên ngoài, vẽ đường viền 24 đơn vị qua mặt nạ ẩn phần trong của hình. Giữ bản sao đường dẫn gốc: vùng cắt và mặt nạ thay đổi phần nhìn thấy, không thay đổi hình học bên dưới.

Thuộc tính stroke-alignment được đề xuất xuất hiện trong bản thảo biên tập SVG Strokes, nhưng bản thảo nói định nghĩa đường viền SVG 2 vẫn là quy phạm. Với tệp cần hoạt động trên nhiều trình duyệt và trình chỉnh sửa, hãy dựng và thử kết quả nhìn thấy thay vì dựa vào thuộc tính được đề xuất.

Xem đường viền được vẽ nằm ở đâu

Huy hiệu khép kín gốc này dùng một đường dẫn ở cả ba khung. Màu tô xanh mòng két, độ rộng đường viền nhìn thấy danh nghĩa 12 đơn vị và không gian tài liệu xung quanh giữ nguyên. Đường nét đứt san hô là đường dẫn tâm. Trong khung giữa, nó trùng với mép ngoài của dải xanh lam; ở bên phải, nó trùng với mép trong.

Khung giữa giữ ranh giới ngoài được vẽ của huy hiệu ở đường dẫn gốc. Khung ngoài mở rộng vùng được vẽ thêm 12 đơn vị quanh đường dẫn. Nếu huy hiệu gần chạm mép viewBox, phần màu thêm đó có thể bị cắt. Hướng dẫn màu tô và đường viền của MDN mô tả đường viền thông thường được căn giữa trên đường dẫn; hình so sánh trên kết xuất ba cách dựng ở một kích thước.

Tạo đường viền trong bằng vùng cắt

Đặt đường dẫn khép kín trong <defs>. Tái sử dụng nó một lần làm màu tô và một lần làm vùng cắt. Vẽ bản sao thứ hai có độ rộng đường viền gấp đôi mong muốn, rồi giới hạn đường viền đó ở bên trong đường dẫn. Vùng cắt làm mọi thứ ngoài hình của nó vô hình; nó không xóa nửa đường viền bị ẩn. Xem tài liệu clipPath của MDN và hướng dẫn tọa độ clipPath của chúng tôi nếu vùng cắt nhập vào bị lệch khỏi hình.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

Ở đây đường viền 24 đơn vị thường trải 12 đơn vị sang mỗi phía của đường dẫn. Vùng cắt loại nửa ngoài, để lại dải nhìn thấy rộng 12 đơn vị bên trong. Đặt màu tô dưới đường viền được cắt như trong ví dụ nếu muốn toàn bộ dải trong vẫn nhìn thấy. Với đường dẫn phức hợp có lỗ, hãy kiểm tra quy tắc tô màu và cắt trước khi mặc định bên nào là bên trong.

Tạo đường viền ngoài bằng mặt nạ

Dải ngoài cần vùng hiển thị ngược lại. Mặt nạ dưới đây màu trắng trên vùng tài liệu và màu đen trong huy hiệu. Nó chỉ áp dụng cho bản sao đường viền, còn bản sao không có mặt nạ cung cấp màu tô. Vùng mặt nạ được đặt rõ để chừa chỗ cho đường viền vượt hình gốc.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

Một lần nữa, chỉ nửa đường viền 24 đơn vị được căn giữa còn hiện, nên dải ngoài nhìn thấy rộng 12 đơn vị. Chủ động đặt vùng mặt nạ: MDN mô tả cách maskUnits, maskContentUnits và kích thước vùng ảnh hưởng mặt nạ. Hình chữ nhật trắng phải phủ toàn bộ đường viền ngoài. Mặt nạ quá nhỏ có thể cắt chính mép mà bạn muốn giữ.

Có một mẹo thị giác ngắn hơn cho màu tô không trong suốt: vẽ đường viền rộng gấp đôi, rồi vẽ màu tô lên trên bằng paint-order="stroke fill". Cách này giấu nửa trong dưới màu tô, nhưng đường viền vẫn tồn tại ở đó và có thể hiện lại nếu màu tô trở nên bán trong suốt hoặc bị xóa. MDN giải thích thứ tự tô vẽ. Dùng mặt nạ rõ ràng khi dải ngoài phải là một cấu trúc hiển thị riêng. Với viền tạo từ toàn bộ hình bao alpha nhiều màu, xem đường viền hình thái học SVG; bộ lọc đó thay diện mạo và giữ đường dẫn nguồn.

Kiểm tra SVG sau khi nhập

Vùng cắt và mặt nạ tác động kết xuất, trong khi ứng dụng ở bước sau có thể yêu cầu đường bao có màu tô. Giữ bản gốc chỉnh sửa được và thử bản bàn giao trong đích đến thực tế:

1. Mở riêng SVG, rồi đặt nó vào trình chỉnh sửa hoặc ứng dụng sử dụng thực tế dự định. So sánh mép trong và ngoài ở cùng mức thu phóng.
2. Kiểm tra viewBox hoặc bảng vẽ quanh phiên bản ngoài. Chừa chỗ cho dải ra ngoài 12 đơn vị và các mối nối ở góc nhọn.
3. Kiểm tra danh sách đối tượng. Các ví dụ chứa đường dẫn tái sử dụng, vùng cắt hoặc mặt nạ và đường viền còn chỉnh sửa được. Chúng không tạo một đường bao đặc duy nhất.
4. Nếu người nhận cần hình học có màu tô, chuyển đổi đường viền được chọn trên bản bàn giao rồi kiểm tra các hình tạo ra. Giữ nguồn có đường viền còn chỉnh sửa được để đổi độ rộng sau này.

Nếu đường biến mất khi xuất, dùng danh sách kiểm tra đường viền hiển thị để phân biệt thiếu màu, bị cắt và hỗ trợ nhập. Nếu đường viền che màu tô bất ngờ, giải thích paint-order SVG của chúng tôi cho biết lớp nào đang vẽ cuối.

PerfectVector phù hợp ở đâu

Những bước này bắt đầu với đường dẫn SVG có thể chỉnh sửa. Nếu logo chỉ tồn tại dưới dạng PNG hoặc JPG, quy trình vector hóa logo của PerfectVector có thể tạo một bản SVG để đánh giá trước khi thêm vùng cắt hoặc mặt nạ. So sánh hình bao, góc và các lỗ với bản gốc ở kích thước bàn giao dự định. Vector hóa khôi phục hình học để đánh giá; nó không tự đặt căn chỉnh đường viền trong hay ngoài.

Nếu đường dẫn SVG gốc có sẵn, sửa trực tiếp đường dẫn đó. Đồ lại ảnh chụp màn hình của nó thêm bước tái dựng không cần thiết và có thể thay đổi ranh giới bạn đang cố căn chỉnh. Hướng dẫn vector hóa logo giúp chọn giữa đồ lại, vẽ lại và giữ bản vector gốc hiện có.

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

SVG có hỗ trợ căn đường viền trong hoặc ngoài không? Bản thảo biên tập SVG Strokes mô tả những giá trị đó, nhưng nói SVG 2 vẫn là định nghĩa đường viền quy phạm. Để bàn giao tương thích, dùng vùng cắt hoặc mặt nạ đã thử thay vì phụ thuộc thuộc tính trong bản thảo.

Vì sao tôi tăng độ rộng đường viền gấp đôi? Đường viền thông thường chia một nửa sang mỗi phía đường dẫn. Vùng cắt hoặc mặt nạ bỏ một nửa. Vì thế đường viền 24 đơn vị để lại dải trong hoặc ngoài nhìn thấy rộng 12 đơn vị trong các ví dụ này.

Vùng cắt trong hay mặt nạ ngoài có tạo đường bao sẵn sàng để cắt không? Không. Chúng thay diện mạo kết xuất, còn đường dẫn và đường viền bên dưới vẫn tồn tại. Nếu máy cắt hoặc nhà cung cấp cần đường bao có màu tô, tạo bản bàn giao riêng, chuyển đường viền thành đường dẫn trong trình chỉnh sửa phù hợp và kiểm tra hình học sau khi nhập.

Nguồn tham khảo

1. MDN — Màu tô và đường viền — Định nghĩa kết xuất đường viền ở giữa và hành vi paint-order được trình bày ở đây.
2. Nhóm công tác SVG W3C — Bản thảo biên tập SVG Strokes — Xác lập các giá trị căn chỉnh được đề xuất và trạng thái bản thảo so với SVG 2.
3. MDN — Phần tử clipPath — Định nghĩa cách cấu trúc viền trong giới hạn phần nhìn thấy.
4. MDN — Phần tử mask — Định nghĩa vùng mặt nạ và thuộc tính tọa độ dùng cho cấu trúc viền ngoài.
5. Alex Chan — Vẽ đường viền trong/ngoài trong SVG — Minh họa cách dùng đường viền rộng gấp đôi với vùng cắt và mặt nạ, là điểm khởi đầu cho mẫu huy hiệu gốc của chúng tôi.

Nếu logo vẫn là ảnh raster, hãy tạo một bản SVG để đánh giá bằng PerfectVector, kiểm tra ranh giới đường dẫn, rồi thử cách dựng viền trong hoặc ngoài trong trình chỉnh sửa và xác minh tệp bàn giao ở đích đến.