> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Bo góc đường SVG bằng cách đổi hình có tô > Bo một góc SVG có tô bằng cung tiếp tuyến, kiểm tra bán kính có vừa các cạnh không và xem vì sao nối nét tròn vẫn giữ nguyên màu tô gốc. Source: https://perfectvector.com/vi/blog/round-svg-path-corners Language: vi Author: Irene Kim Published: 2026-10-12T08:00:00+09:00 Để 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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. | Đối tượng hoặc yêu cầu | Điểm bắt đầu phù hợp | Thứ thay đổi | | ------------------------------ | ------------------------------------- | --------------------------- | | Hình chữ nhật SVG thông thường | Đặt `rx` hoặc `ry` trên hình chữ nhật | Hình học góc chữ nhật | | Đường góc nhọn có nét | Đặt nối nét tròn | Phần tô quanh đường hiện có | | Đa giác hoặc biểu trưng có tô | Thay góc được chọn bằng đường cong | Hình bóng có tô | | Đường đồ phức tạp có cong | Kiểm tra và chỉnh chỗ nối đã chọn | Tùy các đoạn thực tế | Với hình chữ nhật thông thường, [tham chiếu SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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](https://perfectvector.com/vi/blog/svg-miter-spikes). 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). ```xml ``` 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`: ```xml ``` `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](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) đị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](https://perfectvector.com/vi/blog/svg-arc-flags) 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. ![Biểu trưng góc nhọn có tô với nét viền tròn, cùng biểu trưng có cung bo đường dẫn hai mươi đơn vị và cấu trúc bán kính quá lớn vượt đỉnh tiếp theo](https://perfectvector.com/blog/round-svg-path-corners/fillet-comparison.webp) *Ví dụ đầu đổi phần tô nét. Ví dụ hai đổi đường bao phần tô tối. Ví dụ ba cho thấy kết quả sai khi bỏ qua cạnh kề ngắn hơn; kiểm tra bán kính từ chối trường hợ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ế. ```javascript 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](https://perfectvector.com/vi/blog/svg-bezier-smooth-joins) giải thích công việc sửa riêng đó. [Hướng dẫn chỉnh SVG](https://perfectvector.com/vi/blog/how-to-edit-an-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](https://perfectvector.com/vi/image-to-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](https://perfectvector.com/vi/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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) — Đị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](https://perfectvector.com/vi/image-to-vector). 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. ## Explore - [Read the HTML article](https://perfectvector.com/vi/blog/round-svg-path-corners) - [Lệnh đường dẫn SVG tương đối: Theo dõi điểm hiện tại](https://perfectvector.com/vi/blog/svg-relative-path-commands.md) - [SVG nhập vào sai kích thước: tìm nguyên nhân và sửa](https://perfectvector.com/vi/blog/svg-imports-wrong-size.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)