เส้นรอบรูปจุดใน SVG: ควบคุมระยะเส้นประและปลายมน

หากต้องการเส้นรอบรูป SVG แบบจุด ให้รูปทรงมีเส้นขอบ ตั้ง stroke-linecap="round" และใช้เส้นประยาวศูนย์ตามด้วยช่องว่างบวก เช่น stroke-dasharray="0 20" ความหนาเส้นขอบควบคุมเส้นผ่านศูนย์กลางจุด ตัวเลขที่สองของอาร์เรย์เส้นประควบคุมระยะตามพาธระหว่างศูนย์กลางจุด ไม่ใช่พื้นที่ว่างระหว่างขอบที่มองเห็น

ความต่างนี้สำคัญเมื่อกรอบดูเบียดกันหลังทำปลายมน ตราสัญลักษณ์ปิดเพิ่มอีกปัญหา: ลวดลายซ้ำอาจกลับถึงจุดเริ่มต้นโดยมีช่วงที่เหลือสั้นกว่า ตัวอย่างด้านล่างแยกรูปทรงปลายเส้น ระยะห่างที่มองเห็น และรอยต่อปิด เพื่อให้คุณปรับค่าที่ถูกต้อง

นี่เป็นการตั้งค่าเส้นขอบตกแต่ง ไม่ได้สร้างเส้นรอบรูปเยื้องใหม่หรือเปลี่ยนจุดที่วาดแต่ละจุดเป็นพาธตัดแยกกัน

เปรียบเทียบปลายตัดตรง ปลายมน และจุด

stroke-dasharray สลับความยาวเส้นประที่วาดกับความยาวช่องว่างที่ไม่วาด รายการสองตัวเลขทำให้ตรวจรูปแบบซ้ำได้ง่าย เอกสารอ้างอิงอาร์เรย์เส้นประของ MDN อธิบายด้วยว่ารายการที่มีจำนวนค่าคี่จะทำซ้ำให้กลายเป็นลำดับจำนวนคู่ได้อย่างไร

คัดลอก SVG แบบไฟล์เดี่ยวนี้ลงไฟล์แล้วเปิดในเบราว์เซอร์ แต่ละพาธที่เราสร้างยาว 240 หน่วย และมีเส้นขอบหนา 8:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

แถวแรกใช้ 12 20 กับปลายตัดตรง เส้นประที่ครบชิ้นยาว 12 หน่วย เหลือพื้นที่ว่างที่มองเห็น 20 หน่วย แถวที่สองใช้ตัวเลขเดียวกันกับปลายมน ปลายแต่ละด้านยื่น 4 หน่วยเลยจุดสิ้นสุดของเส้นประพื้นฐาน ดังนั้นเส้นประครบชิ้นกินระยะ 20 หน่วย และช่องว่างที่เห็นลดเหลือ 12

แถวที่สามเปลี่ยนความยาวเส้นประเป็นศูนย์ ปลายมนสร้างจุดเส้นผ่านศูนย์กลาง 8 และศูนย์กลางห่างกัน 20 หน่วยบนพาธตรงนี้ ช่องว่างระหว่างขอบที่เห็นคือ 12 หน่วย กฎการวาด SVG ของ W3C นิยามปลายที่ปลายเส้นประ รวมทั้งการจัดการเส้นประยาวศูนย์ ส่วน เอกสารอ้างอิงปลายเส้นของ MDN อธิบายรูปทรงปลายเส้น

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

• ปลายตัดตรง: ความยาวเส้นประที่เห็น = dash; ช่องว่างที่เห็น = gap
• ปลายมน: ความยาวเส้นประที่เห็น = dash + stroke-width; ช่องว่างที่เห็น = gap - stroke-width
• จุดมน: เส้นผ่านศูนย์กลาง = stroke-width; ระยะศูนย์กลาง = gap; ช่องว่างที่เห็น = gap - stroke-width

หากสูตรสุดท้ายได้ศูนย์หรือติดลบ จุดจะสัมผัสหรือซ้อนกัน บริเวณโค้ง ระยะตามพาธต่างจากระยะตรงระหว่างจุด ตรวจมุมและเส้นโค้งแทนการใช้สูตรช่องว่างเส้นตรงกับเส้นรอบรูปทั้งหมด

ปรับระยะซ้ำให้พอดีกับตราสัญลักษณ์ปิด

พาธตราสัญลักษณ์สี่เหลี่ยมผืนผ้าต่อไปนี้มีขนาด 180 คูณ 120 หน่วยแต่ละอัน เส้นรอบรูปยาว 2 × (180 + 120) = 600 พาธเริ่มที่มุมบนซ้ายและเดินตามเข็มนาฬิกา

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

ด้านซ้าย 0 32 วางศูนย์กลางจุดที่ระยะตามพาธ 0, 32, 64 และต่อไปจนถึง 576 เหลือเพียง 24 หน่วยก่อนพาธกลับสู่จุดเริ่มต้น ช่วงปิดสั้นกว่าช่วงอื่นที่ยาว 32 หน่วย รอยต่อจึงไม่สม่ำเสมอ การเพิ่มขนาดแสดง SVG ขยายความต่างนั้นให้เห็นมากขึ้นโดยไม่ได้แก้ปัญหา

ด้านขวา 0 30 แบ่งเส้นรอบรูปเป็น 20 ช่วงเท่ากัน สำหรับสี่เหลี่ยมนี้โดยเฉพาะ ความยาวทั้งสองด้านหารด้วย 30 ลงตัวด้วย จุดจึงตรงกับมุม ตามด้านตรงแต่ละด้าน จุดขนาด 8 หน่วยเหลือช่องว่างที่มองเห็น 22 หน่วย วิธีนี้แก้ระยะซ้ำของตราสัญลักษณ์ที่เลือก ไม่ใช่คำรับประกันระยะห่างที่เห็นเหมือนกันบนเส้นรอบรูปโค้งทุกแบบ

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

stroke-dashoffset เลื่อนตำแหน่งเริ่มแพตเทิร์นไปตามพาธ มันอาจย้ายรอยต่อที่สะดุดตาไปยังตำแหน่งที่สังเกตยากขึ้น แต่ไม่ได้ทำให้ระยะซ้ำ 32 หน่วยหาร 600 ลงตัว ใช้ระยะซ้ำที่ปรับให้พอดีเมื่อเป้าหมายคือการปิดอย่างสม่ำเสมอ เอกสารอ้างอิงระยะเลื่อนเส้นประของ MDN อธิบายการปรับเฟสนี้

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

รักษาขนาดและการตั้งค่าการวาดให้สอดคล้องกัน

เริ่มด้วยค่าตัวเลขในพิกัดของ SVG เองดังด้านบน อย่าเปลี่ยนเป็นเปอร์เซ็นต์แล้วสมมติว่าแทนสัดส่วนเดียวกันของความยาวเส้นรอบรูปพาธ เอกสารอ้างอิงอาร์เรย์เส้นประ อธิบายว่าการคำนวณเปอร์เซ็นต์อ้างอิงวิวพอร์ตแทนความยาวพาธ

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

ตั้ง fill="none" เมื่อต้องการเฉพาะกรอบ สีเติมยังอาจมองเห็นแม้ส่วนหนึ่งของเส้นขอบเป็นเส้นประ หากจุดที่คาดหวังหายไป ให้ยืนยันว่าองค์ประกอบมีเส้นขอบที่มองเห็นและไม่มี CSS เขียนทับแอตทริบิวต์การแสดงผล รายการตรวจเส้นขอบที่หายไป ครอบคลุมการตรวจเหล่านั้นก่อนเริ่มเปลี่ยนระยะห่าง

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

แยกการเตรียมงานภาพออกจากการออกแบบกรอบ

หากลวดลายภายในตราสัญลักษณ์มีเพียง PNG หรือ JPG กระบวนการแปลงภาพเป็นเวกเตอร์ของ PerfectVector สามารถเตรียมงาน SVG ที่แก้ไขได้สำหรับลวดลายนั้น เปรียบเทียบขอบรูป ช่องเปิดเล็ก และพื้นที่แยกกันกับภาพต้นฉบับก่อนวางภายในกรอบ เก็บเส้นรอบรูปตกแต่งเป็นรูปทรงแยกเพื่อเปลี่ยนความหนาเส้นขอบและระยะจุดได้อย่างอิสระ

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

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

ตรวจเส้นรอบรูปสุดท้าย

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

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

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

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

สร้างจุดกลมแทนเส้นสั้นรูปแคปซูลอย่างไร? ใช้เส้นประยาวศูนย์ ช่องว่างบวก และปลายมน เช่น เส้นขอบหนา 8 กับ stroke-dasharray="0 20" ให้จุดขนาด 8 หน่วยโดยศูนย์กลางห่างกัน 20 หน่วยบนพาธตรง

ทำไมช่องว่างหนึ่งช่วงรอบเส้นรอบรูปปิดจึงต่างออกไป? ระยะซ้ำอาจหารเส้นรอบรูปไม่ลงตัว ปรับระยะซ้ำให้พอดีกับความยาวพาธแล้วตรวจจุดปิดกับมุม การเลื่อน dash offset เปลี่ยนเฟสแพตเทิร์น แต่ไม่แก้ความไม่ลงตัวทางคณิตศาสตร์

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

1. MDN — stroke-dasharray — นิยามรายการสลับเส้นประกับช่องว่างและการจัดการค่า
2. MDN — stroke-linecap — อธิบายรูปทรงปลายตรงกับปลายมนและพฤติกรรมความยาวศูนย์
3. W3C — การวาด SVG — กำหนดการวาดเส้นประ การจัดการปลายเส้น และการจัดการแพตเทิร์นบนพาธย่อย
4. MDN — stroke-dashoffset — นิยามระยะเลื่อนที่ใช้ขยับแพตเทิร์นเส้นประ

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