> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# ทำมุมพาธ SVG ให้มนด้วยการเปลี่ยนรูปเติมสี

> ทำมุม SVG เติมสีให้มนด้วยส่วนโค้งสัมผัส ตรวจรัศมีให้พอดีขอบ และดูว่าทำไมจุดต่อเส้นแบบกลมไม่เปลี่ยนสีเติมเดิม

Source: https://perfectvector.com/th/blog/round-svg-path-corners

Language: th
Author: Irene Kim
Published: 2026-10-12T08:00:00+09:00

การทำมุมเติมสีของพาธ SVG ให้มนต้องเปลี่ยนรูปทรงพาธ หยุดเส้นตรงที่ต่อกันก่อนถึงจุดยอด แล้วเชื่อมจุดปลายใหม่ด้วยโค้ง `stroke-linejoin="round"` เปลี่ยนสีเส้นที่จุดต่อ แต่ยังคงเส้นขอบพื้นที่เติมเดิม

บทเรียนนี้ทำมุมฉากหนึ่งมุมของตราเติมสีต้นฉบับให้มน ใช้แค่โปรแกรมข้อความและเบราว์เซอร์ สุดท้ายจะมี SVG ครบที่มีส่วนลบมุมโค้งวงกลม 20 หน่วย การตรวจว่ารัศมีพอดี และไฟล์มุมแหลมเดิมสำหรับเทียบหรือคืน

ฟิลเลตคือโค้งแทนมุมแหลมและสัมผัสขอบข้างเคียง ตัวอย่างใช้ส่วนโค้งหนึ่งในสี่วงกลมระหว่างขอบตรงแนวนอนกับแนวตั้ง ไม่ได้ทำพาธ Bézier ที่ลากเส้นตามใด ๆ ให้มนอัตโนมัติ

## เลือกการเปลี่ยนที่ภาพต้องการ

[เอกสาร stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin) กำหนดวิธีวาดเส้นที่มุมพาธ ใช้จุดต่อกลมเมื่ออยากเปลี่ยนขอบที่ระบาย หากเปลี่ยนรูปเงาเติมสี ให้แก้พาธจริง

| วัตถุหรือความต้องการ        | จุดเริ่มต้นที่เหมาะ              | สิ่งที่เปลี่ยน         |
| --------------------------- | -------------------------------- | ---------------------- |
| สี่เหลี่ยม SVG ธรรมดา       | ตั้ง `rx` หรือ `ry` บนสี่เหลี่ยม | รูปทรงมุมของสี่เหลี่ยม |
| พาธมุมแหลมมีเส้นขอบ         | ตั้งจุดต่อเส้นกลม                | สีเส้นรอบพาธเดิม       |
| รูปหลายเหลี่ยมหรือตราเติมสี | แทนมุมที่เลือกด้วยโค้ง           | รูปเงาที่เติมสี        |
| พาธลากเส้นซับซ้อนมีโค้ง     | ตรวจและแก้จุดต่อที่เลือก         | ขึ้นกับท่อนจริง        |

สำหรับสี่เหลี่ยมธรรมดา [เอกสาร SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) อธิบาย `rx` และ `ry` ตราของเรามีขอบทแยงด้วย การแปลงเป็นสี่เหลี่ยมมนจึงเปลี่ยนมากกว่ามุมที่เลือก

หากปัญหามีแค่ยอดยาวของเส้น เริ่มจาก[คู่มือยอดแหลม miter](https://perfectvector.com/th/blog/svg-miter-spikes) บทความนี้เปลี่ยนรูปทรงเติมสีแทน

## บันทึกต้นฉบับมุมแหลม

คัดลอกไฟล์ครบนี้ลง `emblem-original.svg` แล้วเปิดเบราว์เซอร์ จุดยอดบนขวาคือ (170, 30) ขอบขาเข้าแนวนอน ขาออกลงถึง (170, 100)

```xml
<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>
```

เก็บเป็นไฟล์หลักเทียบ การเพิ่ม `stroke="#df9d34"`, `stroke-width="8"` และ `stroke-linejoin="round"` ให้ขอบระบายมน แต่สีเติมเข้มยังไปถึงมุมแหลมเดิม

## แทนมุมนั้นด้วยส่วนโค้ง 20 หน่วย

ย้ายปลายเส้นขาเข้าไปซ้ายยอด 20 หน่วยที่ (150, 30) ย้ายต้นเส้นขาออกลง 20 หน่วยที่ (170, 50) วงกลมศูนย์กลาง (150, 50) รัศมี 20 เชื่อมจุดด้วยโค้งหนึ่งในสี่

บันทึกไฟล์ครบที่สองเป็น `emblem-rounded.svg`:

```xml
<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` หมายถึงส่วนโค้งวงกลมรัศมีแนวนอนแนวตั้ง 20 หมุนศูนย์ เลือกโค้งเล็ก sweep flag 1 และจบที่ (170, 50) [ข้อกำหนดพาธ SVG](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) นิยามพารามิเตอร์ สำหรับมุมตามเข็มนี้จะเลือกหนึ่งในสี่วงกลมที่ต้องการ [คู่มือ arc flags](https://perfectvector.com/th/blog/svg-arc-flags) ช่วยแก้ส่วนโค้งที่ไปผิดทาง

รัศมีวงกลมตั้งฉากแนวตั้งที่ปลายแรกและแนวนอนที่ปลายสอง เส้นสัมผัสจึงตามขาเข้าแนวนอนกับขาออกแนวตั้ง โค้งดูมนแต่ยังหักที่จุดต่อได้ วิธีนี้ทำให้ขอบเฉพาะเหล่านี้มีทิศสัมผัสตรงกัน

![ตราเติมสีมุมแหลมมีเส้นขอบกลม ตราเดียวกันมีฟิลเลตพาธยี่สิบหน่วย และแบบรัศมีใหญ่เกินที่เลยยอดถัดไป](https://perfectvector.com/blog/round-svg-path-corners/fillet-comparison.webp)

*ตัวอย่างแรกเปลี่ยนสีเส้น ตัวอย่างสองเปลี่ยนขอบสีเติมเข้ม ตัวอย่างสามแสดงผลผิดเมื่อไม่คำนึงถึงขอบข้างที่สั้นกว่า การตรวจรัศมีจะปฏิเสธกรณีนี้*

## ตรวจว่ารัศมีพอดีกับขอบที่มี

มุม 90 องศาใช้ระยะเท่ารัศมีบนแต่ละขอบติดกัน ขาเข้ายาว 140 หน่วย แต่ขาออกเพียง 70 สำหรับมุมเดียวนี้รัศมีบวกต้องไม่เกิน 70 หากต้องการเก็บส่วนตรงขาออก ให้เลือกเล็กกว่า

ฟังก์ชันต่อไปนี้ตั้งใจจำกัดตราและมุมนี้เท่านั้น รันในคอนโซล JavaScript หรือ Node.js เพื่อสร้างค่า `d` ใหม่

```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
```

รัศมี 80 ถ้าสร้างแบบไม่ตรวจจะจบโค้งที่ (170, 110) เลยยอดถัดไป (170, 100) คำสั่ง `V100` ต่อมาจะย้อนทาง ปฏิเสธรัศมีนั้นแทนยอมรับอะไรก็ตามที่เบราว์เซอร์วาด

สำหรับมุมอื่นระหว่างขอบตรง ระยะสัมผัสขึ้นกับมุม มุมนูนปกติที่มีมุมภายใน θ ใช้ระยะ `r / tan(θ / 2)` หากทำสองปลายของขอบร่วมให้มน ระยะที่กินทั้งคู่ต้องอยู่บนขอบนั้นได้ มุมเว้า โค้งเดิม และรูปประกอบต้องตัดสินรูปทรงเพิ่ม ฟังก์ชันนี้ไม่จัดการ

## ตรวจรูปเงาที่เปลี่ยนแล้วเก็บต้นทาง

1. เปิด SVG ครบทั้งสองที่ขนาดและพื้นหลังเดียวกัน
2. เอาเส้นออกชั่วคราวจากเวอร์ชันจุดต่อระบาย สีเติมควรตรงต้นฉบับมุมแหลม
3. เทียบขอบบนขวาของแบบมน ด้านอื่น ขอบทแยง และตำแหน่งรวมควรเหมือนต้นฉบับ
4. รันตรวจรัศมี 20 แล้ว 80 ครั้งแรกได้พาธที่แสดง ครั้งที่สองเกิดข้อผิดพลาดรัศมี
5. ตรวจ SVG ที่บันทึกในปลายทางจริง คืนต้นฉบับหากความมนลบคุณลักษณะที่ตั้งใจหรือปลายทางเปลี่ยนรูป

หมายเหตุวิธีทดสอบ: เราเรนเดอร์พาธเดิม เส้นกลม และฟิลเลตใน Chromium จุดตรวจสี (169, 31) อยู่ในสองรูปแรกแต่นอกรูปฟิลเลต ฟังก์ชันข้างบนรับ 20 และปฏิเสธ 80 ยังตรวจปลายโค้งทั้งคู่กับรัศมีและทิศสัมผัสข้างเคียง นี่ตรวจตัวอย่างขอบตรงที่ให้ ไม่ใช่อัลกอริทึมฟิลเลตทั่วไปหรือผลเครื่องตัด

หากโค้งโป่งนอก ให้ดูปลายและ sweep flag หากยังหัก ตรวจทิศสัมผัสกับท่อนข้างเคียง [คู่มือรอยต่อ Bézier เรียบ](https://perfectvector.com/th/blog/svg-bezier-smooth-joins) อธิบายงานแก้แยก [คู่มือแก้ SVG](https://perfectvector.com/th/blog/how-to-edit-an-svg) อธิบายเปิด ตรวจ และรักษาไฟล์หลักใช้ได้

## PerfectVector ช่วยก่อนแก้มุมตรงไหน

PerfectVector กู้พาธได้เมื่อภาพมีแต่ราสเตอร์ ตรวจขอบที่กู้ก่อน แล้วเลือกมุมที่จะเปลี่ยนในสำเนา [กระบวนการภาพเป็นเวกเตอร์](https://perfectvector.com/th/image-to-vector) ให้ขั้นกู้ ไม่ได้ทำฟิลเลตนี้อัตโนมัติ

ใช้เวกเตอร์เดิมเมื่อมี ขอบลากเส้นอาจมี Bézier และคลื่นเล็กที่ไม่ตรงตัวอย่างขอบตรงนี้ วาดตราง่ายใหม่อาจง่ายกว่าทำทุกจุดต่อที่ลากเส้นให้มน เก็บรูปอนุมัติก่อนตั้งใจออกแบบใหม่ และใช้[คู่มือขั้นตอนบล็อก](https://perfectvector.com/th/blog) ตรวจการส่งมอบถัดไป

## คำถามที่พบบ่อย

### ทำไมจุดต่อเส้นกลมยังทำให้มุมสีเติมแหลม?

จุดต่อควบคุมเส้นที่ระบายรอบพาธ สีเติมตามรูปทรงเดิม จึงคงมุมจนแทนด้วยโค้ง

### ใช้ฟังก์ชันกับ SVG ทุกพาธได้หรือไม่?

ไม่ รองรับมุมฉากที่ระบุหนึ่งมุมของตราขอบตรงนี้ มุมอื่น มุมเว้า โค้งเดิม และข้อจำกัดขอบร่วมต้องสร้างต่างหาก

### ทำให้ไฟล์พร้อมตัดหรือไม่?

เปลี่ยนขอบเติมสีหนึ่งส่วนในตัวอย่าง ตรวจรูปทรงที่บันทึกและทำการตรวจของเครื่องตัดหรือกระบวนการจริง การทดสอบเบราว์เซอร์ไม่ได้ยืนยันผลตัดจริง

## แหล่งข้อมูล

1. [MDN — SVG stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin) — นิยามการระบายเส้นที่แยกจากรูปทรงสีเติมในการเทียบ
2. [MDN — SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) — อธิบายตัวควบคุมรัศมีง่ายสำหรับสี่เหลี่ยมธรรมดา
3. [W3C — คำสั่งส่วนโค้งวงรี SVG](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) — นิยามรัศมี flags และจุดจบในพาธมนครบชุด

***

หากไม่มีพาธต้นฉบับ ให้[กู้ภาพด้วย PerfectVector](https://perfectvector.com/th/image-to-vector) เทียบขอบกับต้นแบบ เก็บไฟล์หลักที่กู้ และทดสอบการแก้มุมที่ตั้งใจบนสำเนาแยกที่ขนาดใช้

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/round-svg-path-corners)
- [คำสั่งพาธ SVG แบบสัมพัทธ์: ติดตามจุดปัจจุบัน](https://perfectvector.com/th/blog/svg-relative-path-commands.md)
- [SVG นำเข้าแล้วขนาดผิด: ตรวจสาเหตุและแก้ไข](https://perfectvector.com/th/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)