SVG <path>

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

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

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

• M = moveTo
• L = LineTo
• H = LineTo แนวนอน
• V = LineTo แนวตั้ง
• C = curveto
• S = curveto เรียบ
• q = กำลังสองโค้ง Bezier
• t = เรียบกำลังสอง Bezier curveto
• A = โค้งวงรี
• Z = closepath

Note: คำสั่งทั้งหมดนอกจากนี้ยังสามารถแสดงด้วยตัวอักษรที่ลดลงดังกล่าวข้างต้น ตัวอักษรหมายถึงการวางตำแหน่งอย่างกรณีที่ต่ำกว่าค่อนข้างหมายถึงตำแหน่ง

ตัวอย่างที่ 1

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

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

ตัวอย่างที่ 2

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

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

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

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