ปลายแหลม miter ใน SVG: แก้มุมคมโดยไม่ถูกตัด

ปลายคล้ายเข็มบนขอบ SVG มักมาจาก รอยต่อ miter ที่มุมแหลม หากไม่ต้องการปลาย ให้ลด stroke-miterlimit หรือเลือก bevel หรือ round หากปลายเป็นส่วนงานออกแบบแต่ยอดหาย ให้เผื่อพื้นที่เส้นขอบที่ระบายใน viewBox มากขึ้น เป็นการซ่อมต่างกัน: อย่างหนึ่งเปลี่ยนรูปมุม อีกอย่างเปลี่ยนสิ่งที่ไฟล์แสดงได้

เก็บสำเนา SVG เดิมระหว่างทดสอบ โลโก้ที่ตั้งใจมีปลายคมอาจต้องรักษา miter ส่วนปลายเกินบนเส้นขอบนำเข้าอาจต้องใช้รอยต่อแบนกว่า ตัดสินใจก่อนว่ามุมใดควรคงอยู่

ทำไมมุมแคบจึงยื่นแหลม

พาธที่มีเส้นขอบมีความกว้างสองข้างเส้นกลาง เมื่อใช้ stroke-linejoin="miter" ขอบนอกเส้นขอบจะยื่นต่อจนพบกัน ยิ่งเลี้ยวคม จุดพบยิ่งไกล SVG ใช้ miter เป็นรูปแบบรอยต่อเริ่มต้นและ stroke-miterlimit เริ่มต้นเป็น 4 ตามนิยามการระบายสี SVG 2

limit เป็น อัตราส่วน ไม่ใช่ระยะพิกเซลหรือหน่วย SVG หากความยาว miter หารด้วย stroke-width เกิน limit รอยต่อ miter ปกติกลายเป็น bevel ค่า limit สูงยอมให้ปลายยาวขึ้น ค่าต่ำทำให้มุมแหลมจำนวนมากขึ้นเปลี่ยนเป็นแบน เอกสาร miter limit ของ MDN แสดงความสัมพันธ์กับมุมและระบุว่า CSS แทนแอตทริบิวต์นำเสนอ SVG ได้

พาธเดียว ผลที่เห็นสี่แบบ

ในการทดสอบ เราวาดช่วงตราหักมุมเปิดด้วย d="M130 520 L180 200 L230 520" และเส้นขอบ 26 หน่วย สองแผงแรกใช้ miter limit 10 แผงสองมีขอบเขตมองเห็นชิดที่ y=170 ซึ่งตัดปลาย แผงสามใช้ limit 4 มุมนี้จึงเป็น bevel แผงสี่ใช้ round นี่เป็นภาพประกอบควบคุมของ พาธและตัวเรนเดอร์นั้น ไม่ใช่คำรับประกันว่า SVG นำเข้าทุกไฟล์มีรูปมุมเดียวกัน

เส้นกลางประแดงไม่เปลี่ยนทั้งสี่แผง สำคัญเพราะการเปลี่ยนรอยต่อเส้นขอบซ่อมขอบที่ระบายได้โดยไม่สร้างพาธเวกเตอร์พื้นฐานใหม่

เป็นปลายแหลม bevel หรือปลายถูกตัด?

ปลายถูกครอบอาจดูเหมือน bevel ที่ตั้งใจเมื่อมองคร่าว ๆ ซูมดูและตรวจว่าปลายตรงขอบไฟล์หรือไม่ คู่มือวินิจฉัยเส้นขอบ SVG หาย อธิบายสาเหตุสีและการตัดอื่น การทดสอบนี้แยกมุม miter

แก้มุมโดยไม่เปลี่ยนผิดสิ่ง

1. หาพาธและรอยต่อที่มีผลจริง

เลือกมุมในโปรแกรมเวกเตอร์ หรือตรวจข้อความ SVG หา stroke, stroke-width, stroke-linejoin และ stroke-miterlimit ตรวจกลุ่มแม่และกฎ CSS นอกเหนือแอตทริบิวต์พาธ พร็อพเพอร์ตี stroke-miterlimit inline หรือในสไตล์ชีตมีความสำคัญเหนือแอตทริบิวต์นำเสนอเดียวกันบนองค์ประกอบได้ ตามเอกสาร MDN

หากวัตถุที่เลือกเป็นเส้นรอบรูปเติมสีแทนเส้นขอบที่ปรับได้ ให้หยุดปรับ miter ต้องเปลี่ยนพาธสีเติมหรือกลับไฟล์หลักก่อนขยายเส้นขอบ หากทั้งภาพนำเข้าขนาดผิด ให้ทำการทดสอบนำเข้า SVG ที่ทราบขนาด ก่อนชดเชยด้วยเปลี่ยนความกว้างเส้นขอบ

2. เปลี่ยนรอยต่อทีละค่าบนสำเนา

ลอง bevel ก่อนเมื่อยอมรับมุมตัดแบนได้ ลอง round เมื่อแบบยอมให้ขอบนุ่ม เก็บ miter เมื่อปลายแม่นยำเป็นส่วนสัญลักษณ์ และเลือก limit ที่รักษาเฉพาะปลายที่ตั้งใจ เอกสาร stroke-linejoin ของ SVG นิยามความต่างรูปมุมทั่วไป

นี่เป็นสำเนาทดสอบเล็กของพาธด้านบน:

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

เปลี่ยน stroke-miterlimit เป็น 4 เพื่อเห็น bevel ที่มุมเฉพาะนี้ จากนั้นคืน 10 และเปลี่ยน stroke-linejoin เป็น round หรือ bevel ค่า stroke-miterlimit ไม่มีผลกับสองแบบหลัง อย่าลดทั้งโลโก้เพราะมุมเดียวผิด มุมอื่นอาจตั้งใจให้แหลม

3. เผื่อพื้นที่วาดให้ปลายที่ต้องการ

หาก miter ถูกแต่หายที่ขอบ ขยายหรือปรับตำแหน่ง viewBox รอบผลที่ ระบายสี ไม่ใช่เฉพาะพิกัดพาธ นิยามระบบพิกัด SVG 2 อธิบายกรอบมองเห็น เส้นขอบยื่นเลยพิกัดเส้นกลางได้ ตรวจวิวพอร์ต SVG ซ้อนและ clip path ด้วย clip ขององค์ประกอบแม่อาจยังตัดปลายแม้ขยาย viewBox รากแล้ว

อย่าถือพื้นที่วาดใหญ่เป็นการซ่อมเข็มที่ไม่ตั้งใจ มันเพียงเผยเข็มมากขึ้น ในทางกลับกัน การเปลี่ยนเป็น bevel แค่ให้พอดีอาร์ตบอร์ดชิดอาจลบมุมที่ออกแบบไว้ เทียบไฟล์ส่งมอบกับสัญลักษณ์เดิมที่ขนาดแสดงหรือพิมพ์จริง หากผู้ผลิตวัดขนาดกายภาพ SVG ให้คงความกว้างและสูงตามตั้งใจขณะเปลี่ยนการแมป viewBox อย่างมีหลักเกณฑ์

4. เปิดไฟล์ส่งมอบใหม่

ตรวจผลในเบราว์เซอร์และโปรแกรมแก้ไขหรือผลิตปลายทาง ดูปลายที่ 100% และขนาดสุดท้าย หากงานส่งมอบต้องการเส้นรอบรูปเติมสีแทนเส้นขอบที่แก้ได้ เก็บไฟล์หลักเดิม แปลงสำเนาเส้นขอบเป็นเส้นรอบรูปในโปรแกรม แล้วตรวจขอบเติมสีใหม่ การแปลงเปลี่ยนเรขาคณิต ไม่ใช่การตั้ง miter ที่ย้อนกลับได้ สำหรับตรวจสีเติมและขอบกว้างขึ้น ดูคู่มือ paint-order ของ SVG

เมื่อโลโก้ราสเตอร์ต้องมีพาธใหม่ก่อน

miter ใช้ได้เฉพาะเส้นขอบเวกเตอร์ที่ยังปรับได้ หากโลโก้เหลือเพียง PNG หรือ JPG กระบวนการแปลงโลโก้เป็นเวกเตอร์ของ PerfectVector สร้าง SVG สำหรับประเมินก่อนแก้มุมได้ เทียบขอบรูป ช่องเล็ก และโครงสร้างพาธกับต้นทาง ผลไล่เส้นอาจแทนเส้นราสเตอร์หนาเป็น เส้นรอบรูปเติมสี ไม่ใช่เส้นกลางเดิมที่แก้ได้ จึงอย่าคาดว่า stroke-miterlimit ซ่อมผลนั้นอัตโนมัติ วาดจุดเรขาคณิตสำคัญใหม่เมื่อต้องตรงไฟล์หลักแบรนด์พอดี

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

ตรวจมุมก่อนส่งมอบ

1. เก็บเวกเตอร์หลักที่ไม่แก้
2. ยืนยันว่ามุมเป็นเส้นขอบที่ปรับได้หรือเส้นรอบรูปเติมสี
3. เทียบ miter, bevel และ round บนพาธที่เกี่ยวเพียงตัวเดียว
4. หากรักษา miter ทดสอบ limit และเผื่อพื้นที่มองเห็นสำหรับปลายที่ระบายเต็ม
5. เปิด SVG ในปลายทางจริงใหม่และตรวจที่ขนาดสุดท้าย

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

ทำไม SVG มีปลายแหลมที่มุมคม? รอยต่อ miter ต่อขอบนอกเส้นขอบจนพบกัน ที่มุมแหลมจุดพบอาจไกลจากเส้นกลาง ลด miter limit หรือใช้ bevel หรือ round เมื่อปลายไม่ตั้งใจ

ทำไมลด stroke-miterlimit แล้วมุมแบน? เมื่ออัตราส่วนความยาว miter ต่อความกว้างเส้นขอบเกิน limit รอยต่อ miter ปกติเปลี่ยนเป็น bevel ค่าต่ำทำให้เปลี่ยนที่มุมมากขึ้น เก็บ limit สูงหากตั้งใจปลายคม แล้วตรวจขอบเขต

ทำไมปลาย SVG ยังถูกตัดหลังเพิ่ม miter limit? limit สูงอาจทำปลายยาวขึ้นขณะที่ viewBox หรือ clip ยังตัด ขยายบริเวณมองเห็นรอบเส้นขอบที่ระบายหรือย้ายสัญลักษณ์ แล้วเปิด SVG ส่งมอบในปลายทางใหม่

แหล่งอ้างอิง

1. W3C — การระบายสี SVG 2 — นิยามรอยต่อเส้นขอบ ค่าเริ่มต้น และพฤติกรรมเปลี่ยนจาก miter
2. MDN — stroke-miterlimit — อธิบายอัตราส่วน limit และความสัมพันธ์กับมุมคม
3. MDN — stroke-linejoin — นิยามรูปมุมทั่วไปของพาธเส้นขอบ
4. MDN — stroke-miterlimit ของ CSS — อธิบายความสำคัญพร็อพเพอร์ตี CSS เหนือแอตทริบิวต์นำเสนอ SVG
5. W3C — ระบบพิกัด SVG 2 — นิยามความสัมพันธ์ viewBox กับวิวพอร์ตที่ใช้ตรวจขอบเขต

หากสัญลักษณ์ราสเตอร์ล้วนต้องมีพาธใช้งานก่อนซ่อม สร้าง SVG สำหรับประเมินจากโลโก้ ตรวจเรขาคณิต แล้วปรับหรือวาดมุมสำคัญใหม่