SVG <เส้นทาง>

เส้นทาง SVG - <เส้นทาง>

<path> องค์ประกอบใช้เพื่อกำหนดเส้นทาง

คำสั่งต่อไปนี้มีให้สำหรับข้อมูลพาธ:

• M = moveto
• L = lineto
• H = เส้นแนวนอนto
• V = เส้นแนวตั้งเป็น
• C = Curveto
• S = เส้นโค้งเรียบ
• Q = เส้นโค้งเบซิเยร์กำลังสอง
• T = เรียบกำลังสอง Bézier curveto
• A = Arc วงรี
• Z = closepath

หมายเหตุ:คำสั่งทั้งหมดข้างต้นสามารถแสดงด้วยตัวอักษรล่างได้เช่นกัน ตัวพิมพ์ใหญ่หมายถึงตำแหน่งที่แน่นอน ตัวพิมพ์เล็กหมายถึงตำแหน่งที่ค่อนข้าง

ตัวอย่าง 1

ตัวอย่างด้านล่างกำหนดเส้นทางที่เริ่มต้นที่ตำแหน่ง 150,0 โดยมีบรรทัดไปยังตำแหน่ง 75,200 จากนั้นจึงกำหนดบรรทัดที่ 225,200 และสุดท้ายปิดเส้นทางกลับไปที่ 150,0:

นี่คือรหัส SVG:

ตัวอย่าง 2

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

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

นี่คือรหัส SVG:

ซับซ้อน? ใช่!!!! เนื่องจากความซับซ้อนที่เกี่ยวข้องกับเส้นทางการวาด ขอแนะนำให้ใช้ตัวแก้ไข SVG เพื่อสร้างกราฟิกที่ซับซ้อน