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

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

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

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

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

เอกสาร stroke-linejoin กำหนดวิธีวาดเส้นที่มุมพาธ ใช้จุดต่อกลมเมื่ออยากเปลี่ยนขอบที่ระบาย หากเปลี่ยนรูปเงาเติมสี ให้แก้พาธจริง

สำหรับสี่เหลี่ยมธรรมดา เอกสาร SVG rect อธิบาย rx และ ry ตราของเรามีขอบทแยงด้วย การแปลงเป็นสี่เหลี่ยมมนจึงเปลี่ยนมากกว่ามุมที่เลือก

หากปัญหามีแค่ยอดยาวของเส้น เริ่มจากคู่มือยอดแหลม miter บทความนี้เปลี่ยนรูปทรงเติมสีแทน

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

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

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

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

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

บันทึกไฟล์ครบที่สองเป็น 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 หมายถึงส่วนโค้งวงกลมรัศมีแนวนอนแนวตั้ง 20 หมุนศูนย์ เลือกโค้งเล็ก sweep flag 1 และจบที่ (170, 50) ข้อกำหนดพาธ SVG นิยามพารามิเตอร์ สำหรับมุมตามเข็มนี้จะเลือกหนึ่งในสี่วงกลมที่ต้องการ คู่มือ arc flags ช่วยแก้ส่วนโค้งที่ไปผิดทาง

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

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

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

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

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 เรียบ อธิบายงานแก้แยก คู่มือแก้ SVG อธิบายเปิด ตรวจ และรักษาไฟล์หลักใช้ได้

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

PerfectVector กู้พาธได้เมื่อภาพมีแต่ราสเตอร์ ตรวจขอบที่กู้ก่อน แล้วเลือกมุมที่จะเปลี่ยนในสำเนา กระบวนการภาพเป็นเวกเตอร์ ให้ขั้นกู้ ไม่ได้ทำฟิลเลตนี้อัตโนมัติ

ใช้เวกเตอร์เดิมเมื่อมี ขอบลากเส้นอาจมี Bézier และคลื่นเล็กที่ไม่ตรงตัวอย่างขอบตรงนี้ วาดตราง่ายใหม่อาจง่ายกว่าทำทุกจุดต่อที่ลากเส้นให้มน เก็บรูปอนุมัติก่อนตั้งใจออกแบบใหม่ และใช้คู่มือขั้นตอนบล็อก ตรวจการส่งมอบถัดไป

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

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

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

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

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

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

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

แหล่งข้อมูล

1. MDN — SVG stroke-linejoin — นิยามการระบายเส้นที่แยกจากรูปทรงสีเติมในการเทียบ
2. MDN — SVG rect — อธิบายตัวควบคุมรัศมีง่ายสำหรับสี่เหลี่ยมธรรมดา
3. W3C — คำสั่งส่วนโค้งวงรี SVG — นิยามรัศมี flags และจุดจบในพาธมนครบชุด

หากไม่มีพาธต้นฉบับ ให้กู้ภาพด้วย PerfectVector เทียบขอบกับต้นแบบ เก็บไฟล์หลักที่กู้ และทดสอบการแก้มุมที่ตั้งใจบนสำเนาแยกที่ขนาดใช้