Bo góc đường SVG bằng cách đổi hình có tô

Để bo góc phần tô của đường SVG, hãy đổi hình học đường dẫn. Dừng mỗi đoạn thẳng kề trước đỉnh rồi nối các điểm cuối mới bằng đường cong. stroke-linejoin="round" đổi nét được tô tại chỗ nối; nó giữ nguyên đường bao có tô ban đầu.

Hướng dẫn này bo một góc vuông của biểu trưng có tô tự tạo. Bạn cần trình soạn thảo văn bản thuần và trình duyệt. Cuối bài, bạn có SVG đầy đủ với cung bo tròn 20 đơn vị, kiểm tra bán kính đã chọn có vừa không và tệp góc nhọn gốc để so hoặc khôi phục.

Cung bo là đường cong thay góc nhọn và gặp các cạnh kề theo tiếp tuyến. Ví dụ dùng một phần tư đường tròn giữa cạnh thẳng ngang và dọc. Nó không tự bo các đường Bézier được đồ tùy ý.

Chọn thay đổi thiết kế cần

Tham chiếu stroke-linejoin định nghĩa cách vẽ nét tại góc đường dẫn. Dùng nối tròn khi phần viền được tô là thứ cần đổi. Để đổi hình bóng có tô, chỉnh đường dẫn thực.

Với hình chữ nhật thông thường, tham chiếu SVG rect mô tả rx và ry. Biểu trưng của chúng tôi có cả cạnh chéo, nên đổi thành chữ nhật bo góc sẽ thay nhiều hơn góc đã chọn.

Nếu vấn đề chỉ là gai dài trên nét, bắt đầu với chẩn đoán gai miter. Bài này thay đổi hình học có tô.

Lưu bản gốc góc nhọn

Sao chép tệp đầy đủ vào emblem-original.svg rồi mở trong trình duyệt. Đỉnh trên phải là (170, 30). Cạnh đi vào nằm ngang; cạnh đi ra tiếp tục xuống (170, 100).

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H170V100L110 160H30Z"/>
</svg>

Giữ tệp này làm bản gốc so sánh. Thêm stroke="#df9d34", stroke-width="8" và stroke-linejoin="round" vào đường tạo viền tô tròn, trong khi phần tô tối vẫn chạm góc nhọn gốc.

Thay góc đó bằng cung 20 đơn vị

Dịch điểm cuối đường đi vào sang trái đỉnh 20 đơn vị, tới (150, 30). Dịch đầu đường đi ra xuống 20 đơn vị, tới (170, 50). Đường tròn tâm (150, 50), bán kính 20 nối các điểm bằng một phần tư cung.

Lưu tệp đầy đủ thứ hai thành emblem-rounded.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z"/>
</svg>

A20 20 0 0 1 170 50 nghĩa là cung tròn với bán kính ngang, dọc 20, xoay bằng không, cung nhỏ và cờ quét 1, kết thúc tại (170, 50). Đặc tả đường dẫn SVG định nghĩa tham số. Với góc theo chiều kim đồng hồ này, chúng chọn một phần tư đường tròn mong muốn. Hướng dẫn cờ cung giúp chẩn đoán cung uốn sai hướng.

Bán kính đường tròn dọc tại điểm đầu và ngang tại điểm sau. Vì vậy tiếp tuyến theo đường đi vào ngang và đường đi ra dọc. Đường cong có thể trông tròn nhưng vẫn gãy tại nối; cấu trúc này cho đúng hai cạnh đó hướng tiếp tuyến khớp.

Kiểm tra bán kính vừa các cạnh có sẵn

Tại góc 90 độ này, cung bo tròn dùng khoảng dọc mỗi cạnh kề bằng bán kính. Đoạn đi vào dài 140 đơn vị, nhưng đoạn đi ra chỉ 70. Với cấu trúc một góc này, bán kính dương không được lớn hơn 70; chọn nhỏ hơn khi muốn giữ phần thẳng của cạnh đi ra.

Hàm sau chủ ý chỉ dành cho đúng biểu trưng và góc này. Chạy trong bảng điều khiển JavaScript hoặc Node.js để tạo giá trị d thay thế.

function roundEmblemCorner(radius) {
  const incomingLength = 170 - 30;
  const outgoingLength = 100 - 30;
  if (!Number.isFinite(radius) || radius <= 0 ||
      radius > Math.min(incomingLength, outgoingLength)) {
    throw new Error('Radius must be positive and fit both adjacent edges.');
  }
  return `M30 30H${170 - radius}` +
    `A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
    'V100L110 160H30Z';
}
 
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z

Với bán kính 80, cách dựng đơn giản sẽ kết thúc cung tại (170, 110), vượt đỉnh tiếp theo (170, 100). V100 tiếp đó sẽ đảo hướng. Từ chối bán kính ấy thay vì chấp nhận bất cứ hình nào trình duyệt vẽ.

Với góc cạnh thẳng khác, khoảng đến tiếp điểm tùy góc. Với góc lồi thông thường có góc trong θ, khoảng là r / tan(θ / 2). Nếu bo cả hai đầu cạnh chung, hai khoảng bị dùng phải cùng vừa cạnh đó. Góc lõm, đường cong có sẵn và hình phức hợp cần thêm quyết định hình học; hàm này không xử lý chúng.

Xác minh hình bóng đổi rồi giữ nguồn

1. Mở cả hai SVG đầy đủ ở cùng cỡ và nền.
2. Tạm bỏ nét khỏi bản có nối tròn. Phần tô cần khớp bản góc nhọn gốc.
3. So đường bao trên phải của bản bo. Các cạnh còn lại, cạnh chéo và vị trí tổng thể cần khớp bản gốc.
4. Chạy kiểm tra bán kính với 20 rồi 80. Đầu tiên tạo đường đã cho; thứ hai báo lỗi bán kính.
5. Kiểm tra SVG đã lưu tại đích sử dụng. Khôi phục bản gốc nếu bo góc bỏ đặc điểm có chủ đích hoặc đích đổi hình thức.

Ghi chú phương pháp: chúng tôi kết xuất đường gốc, nét tròn và đường bo trong Chromium. Điểm dò tô (169, 31) nằm trong hai hình đầu và ngoài hình bo. Đúng hàm trên chấp nhận 20 và từ chối 80. Chúng tôi cũng kiểm tra hai điểm cuối cung theo bán kính và hướng tiếp tuyến cạnh kề. Điều này xác minh ví dụ cạnh thẳng được cung cấp, không phải thuật toán bo chung hoặc đầu ra máy cắt.

Nếu cong phình ra ngoài, kiểm tra điểm cuối cung và cờ quét. Nếu còn gãy, kiểm tra tiếp tuyến cong khớp đoạn cạnh bên; hướng dẫn nối mượt Bézier giải thích công việc sửa riêng đó. Hướng dẫn chỉnh SVG trình bày mở, kiểm tra và giữ bản gốc dùng được.

PerfectVector phù hợp ở đâu trước khi chỉnh góc

PerfectVector có thể khôi phục đường vector khi thiết kế chỉ có raster. Kiểm tra đường bao khôi phục trước rồi quyết định góc nào cần đổi trong bản sao. Quy trình chuyển ảnh thành vector cung cấp bước khôi phục, không tự áp dụng cấu trúc bo này.

Dùng tệp vector gốc khi có. Đường đồ lại có thể chứa đoạn Bézier và gợn nhỏ không khớp ví dụ cạnh thẳng này. Vẽ lại biểu trưng đơn giản dự kiến có thể dễ hơn bo mọi chỗ nối được đồ. Giữ hình đã duyệt trước mọi thiết kế lại có chủ đích và dùng hướng dẫn quy trình blog cho kiểm tra bàn giao tiếp theo.

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

Vì sao nối nét tròn vẫn để góc phần tô nhọn?

Chỗ nối kiểm soát nét được tô quanh đường dẫn. Phần tô theo hình học hiện có nên giữ góc gốc đến khi bạn thay hình học bằng cong.

Có thể dùng hàm trên mọi đường SVG không?

Không. Nó xử lý một góc vuông xác định của biểu trưng cạnh thẳng đã cho. Góc khác, góc lõm, cong hiện có và ràng buộc cạnh chung cần cách dựng riêng.

Cách này có làm tệp sẵn sàng cắt không?

Nó đổi một đường bao có tô trong ví dụ. Kiểm tra hình học đã lưu và thực hiện kiểm tra máy cắt hoặc quy trình sản xuất thực yêu cầu; thử trình duyệt không xác nhận kết quả cắt vật lý.

Nguồn

1. MDN — SVG stroke-linejoin — Định nghĩa cài đặt tô nét được phân biệt với hình học màu tô trong so sánh.
2. MDN — SVG rect — Mô tả điều khiển bán kính đơn giản cho hình chữ nhật thường.
3. W3C — Lệnh cung elip SVG — Định nghĩa bán kính, cờ và điểm cuối dùng trong đường bo đầy đủ.

Nếu thiếu đường dẫn gốc, khôi phục thiết kế bằng PerfectVector. So đường bao với tham chiếu, lưu bản khôi phục gốc và thử các chỉnh góc có chủ đích trong bản sao riêng ở cỡ dự kiến.