Mũi nhọn miter SVG: sửa góc sắc mà không bị cắt

Mũi nhọn như kim trên đường viền SVG thường xuất phát từ điểm nối miter ở góc nhọn. Nếu không muốn mũi nhọn đó, giảm stroke-miterlimit hoặc chọn điểm nối vát hay tròn. Nếu mũi nhọn thuộc thiết kế nhưng phần đầu biến mất, hãy cho đường viền được vẽ thêm khoảng trống trong viewBox. Đây là hai cách sửa khác nhau: một thay đổi hình dạng góc; một thay đổi phần tệp có thể hiển thị.

Giữ bản sao SVG gốc khi thử nghiệm. Logo có đầu nhọn chủ ý có thể cần giữ miter, còn mũi nhọn thừa trên đường viền nhập vào có thể cần điểm nối phẳng hơn. Trước tiên hãy quyết định góc nào cần giữ.

Vì sao góc hẹp tạo mũi nhọn

Đường dẫn có đường viền có độ rộng ở cả hai phía đường tâm. Với stroke-linejoin="miter", các mép ngoài đường viền kéo dài tới khi gặp nhau. Góc rẽ càng sắc, điểm gặp có thể càng xa. SVG dùng miter làm kiểu nối ban đầu và stroke-miterlimit ban đầu là 4, theo định nghĩa tô/vẽ SVG 2.

Giới hạn là tỷ số, không phải khoảng cách bằng pixel hay đơn vị SVG. Nếu độ dài miter chia cho stroke-width vượt giới hạn, điểm nối miter thông thường trở thành góc vát. Giới hạn cao hơn cho phép đầu nhọn dài hơn; giới hạn thấp hơn làm nhiều góc nhọn trở nên phẳng. Tài liệu giới hạn miter của MDN cho thấy quan hệ với góc và lưu ý thuộc tính CSS có thể ghi đè thuộc tính trình bày SVG.

Một đường dẫn, bốn kết quả nhìn thấy

Trong phép thử này, chúng tôi vẽ một đoạn biểu trưng mở có góc cạnh với d="M130 520 L180 200 L230 520" và đường viền rộng 26 đơn vị. Hai khung đầu dùng giới hạn miter 10. Khung thứ hai áp dụng giới hạn hiển thị chặt tại y=170, cắt mất đầu nhọn. Khung thứ ba dùng giới hạn 4 nên góc này trở thành góc vát. Khung thứ tư dùng round. Đây là minh họa được kiểm soát cho đường dẫn và trình hiển thị đó, không phải cam kết mọi SVG nhập vào có cùng hình dạng góc.

Đường tâm đỏ nét đứt không thay đổi ở cả bốn khung. Điều này quan trọng: đổi kiểu nối đường viền có thể sửa đường viền được vẽ mà không tái dựng đường dẫn vector bên dưới.

Đó là mũi nhọn, góc vát hay đầu nhọn bị cắt?

Đầu nhọn bị cắt thoạt nhìn có thể giống góc vát có chủ ý. Phóng lớn và kiểm tra đầu của nó có thẳng hàng với biên tệp không. Hướng dẫn chẩn đoán đường viền SVG biến mất trình bày các nguyên nhân tô/vẽ và cắt khác; phép thử này tách riêng góc miter.

Sửa góc mà không thay đổi nhầm yếu tố

1. Tìm đường dẫn và kiểu nối thực sự áp dụng

Chọn góc trong trình chỉnh sửa vector hoặc xem văn bản SVG để tìm stroke, stroke-width, stroke-linejoin và stroke-miterlimit. Kiểm tra nhóm cha và quy tắc CSS cùng các thuộc tính của chính đường dẫn. Thuộc tính stroke-miterlimit nội tuyến hoặc trong bảng định kiểu có thể được ưu tiên hơn cùng thuộc tính trình bày trên phần tử, như MDN mô tả.

Nếu đối tượng chọn là đường bao đã chuyển thành vùng tô thay vì đường viền chỉnh sửa được, ngừng điều chỉnh cài đặt miter. Bạn phải đổi đường dẫn vùng tô đó hoặc quay về bản gốc chưa mở rộng đường viền. Nếu toàn bộ hình nhập sai kích thước, chạy phép thử nhập SVG có kích thước đã biết trước khi bù bằng cách đổi độ rộng đường viền.

2. Đổi một cài đặt điểm nối trên bản sao

Thử góc vát trước nếu thiết kế chấp nhận góc phẳng kiểu cơ học. Thử tròn khi thiết kế cho phép mép mềm hơn. Giữ miter khi đầu nhọn chính xác thuộc biểu trưng và chọn giới hạn chỉ giữ những đầu nhọn dự định. Tài liệu SVG stroke-linejoin xác định khác biệt giữa các hình dạng nối phổ biến.

Đây là bản thử nhỏ của đường dẫn dùng ở trên:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

Đổi stroke-miterlimit thành 4 để thấy phương án góc vát dự phòng tại góc cụ thể này. Sau đó khôi phục 10 và đổi stroke-linejoin thành round hoặc bevel. Giá trị stroke-miterlimit không liên quan với hai kiểu nối sau. Đừng giảm nó trên toàn bộ logo chỉ vì một góc có vấn đề; các đầu nhọn khác có thể là chủ ý.

3. Cho đầu nhọn mong muốn đủ khung vẽ

Nếu miter đúng nhưng biến mất ở mép, mở rộng hoặc đặt lại viewBox quanh kết quả được vẽ, không chỉ tọa độ đường dẫn. Định nghĩa hệ tọa độ SVG 2 giải thích hình chữ nhật hiển thị; đường viền có thể vượt ra ngoài tọa độ đường tâm của nó. Cũng kiểm tra khung nhìn SVG lồng và đường dẫn cắt. Vùng cắt cha có thể tiếp tục cắt đầu nhọn ngay cả khi viewBox gốc mở rộng.

Đừng coi khung vẽ lớn hơn là cách sửa mũi kim ngoài ý muốn. Nó chỉ làm lộ thêm mũi kim đó. Ngược lại, đổi điểm nối thành vát chỉ để vừa bản vẽ chật có thể xóa góc được thiết kế. So sánh tệp bàn giao với biểu trưng gốc ở kích thước hiển thị hoặc in thực tế. Nếu nhà cung cấp đo kích thước SVG vật lý, giữ chiều rộng và chiều cao dự định khi chủ động thay đổi ánh xạ viewBox.

4. Mở lại tệp bàn giao

Kiểm tra kết quả trong trình duyệt và trình chỉnh sửa hoặc ứng dụng đích. Kiểm tra đầu nhọn ở 100% và kích thước cuối dự định. Nếu bàn giao yêu cầu đường bao được tô thay vì đường viền chỉnh sửa được, giữ bản gốc, chuyển đường viền thành hình trên bản bàn giao trong trình chỉnh sửa và kiểm tra ranh giới vùng tô mới. Chuyển đường viền thành hình làm thay đổi hình học; đó không phải cài đặt miter có thể đảo lại. Để kiểm tra màu tô và đường viền rộng hơn, xem hướng dẫn thứ tự tô/vẽ SVG.

Khi logo raster cần đường dẫn mới trước

Điều khiển miter chỉ hoạt động trên đường viền vector còn chỉnh sửa được. Nếu logo duy nhất còn lại là PNG hoặc JPG, quy trình vector hóa logo của PerfectVector có thể tạo một bản SVG trước khi bạn chỉnh góc. So sánh dáng bao ngoài khôi phục, khe nhỏ và cấu trúc đường dẫn với nguồn. Kết quả đồ lại có thể biểu diễn đường raster dày dưới dạng đường bao được tô, không phải đường tâm chỉnh sửa được ban đầu, nên đừng kỳ vọng stroke-miterlimit tự động sửa kết quả đó. Vẽ lại điểm hình học quan trọng khi nó phải khớp chính xác bản thương hiệu gốc.

Nếu SVG gốc tồn tại, sửa tệp đó thay vì vector hóa ảnh chụp màn hình. Hướng dẫn vector hóa logo giúp khi bạn thực sự phải dựng lại hình từ pixel; bài viết này bắt đầu sau khi đã có đường viền phù hợp còn chỉnh sửa được.

Kiểm tra góc cuối cùng

1. Lưu bản vector gốc chưa chỉnh sửa.
2. Xác nhận góc là đường viền còn chỉnh sửa được hay đường bao được tô.
3. So sánh miter, bevel và round trên riêng đường dẫn bị ảnh hưởng.
4. Nếu giữ miter, thử giới hạn của nó và để đủ vùng hiển thị cho toàn bộ đầu nhọn được vẽ.
5. Mở lại SVG trong ứng dụng đích thực tế và kiểm tra ở kích thước cuối.

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

Vì sao SVG của tôi có mũi nhọn ở các góc sắc? Điểm nối miter kéo dài các mép ngoài đường viền tới khi gặp nhau. Ở góc nhọn, điểm gặp đó có thể cách xa đường tâm. Giảm giới hạn miter hoặc dùng bevel hay round khi đầu nhọn ngoài ý muốn.

Vì sao giảm stroke-miterlimit làm góc phẳng? Khi tỷ số độ dài miter trên độ rộng đường viền vượt giới hạn, điểm nối miter thông thường chuyển sang bevel. Giá trị thấp hơn kích hoạt phương án đó ở nhiều góc hơn. Giữ giới hạn cao hơn nếu đầu nhọn có chủ ý, rồi kiểm tra giới hạn hình.

Vì sao đầu nhọn SVG vẫn bị cắt sau khi tăng giới hạn miter? Giới hạn cao hơn có thể làm đầu nhọn dài hơn trong khi viewBox hoặc vùng cắt vẫn cắt nó. Mở rộng vùng hiển thị quanh đường viền được vẽ hoặc đặt lại vị trí biểu trưng, rồi mở lại SVG bàn giao trong ứng dụng đích.

Nguồn tham khảo

1. W3C — Tô vẽ SVG 2 — Xác định điểm nối đường viền, giá trị ban đầu và hành vi chuyển phương án miter.
2. MDN — stroke-miterlimit — Giải thích tỷ số giới hạn và quan hệ với góc sắc.
3. MDN — stroke-linejoin — Xác định hình dạng góc phổ biến cho đường dẫn có đường viền.
4. MDN — CSS stroke-miterlimit — Mô tả ưu tiên thuộc tính CSS hơn thuộc tính trình bày SVG.
5. W3C — Hệ tọa độ SVG 2 — Xác định quan hệ viewBox và khung nhìn dùng trong kiểm tra biên.

Nếu biểu trưng chỉ có raster cần đường dẫn sử dụng được trước khi sửa, tạo một bản SVG từ logo, kiểm tra hình học, rồi điều chỉnh hoặc vẽ lại các góc quan trọng.