เส้นทาง SVG
เส้นทาง SVG - <path>
<เส้นทาง> องค์ประกอบที่จะใช้ในการกำหนดเส้นทาง
คำสั่งดังต่อไปนี้สามารถนำมาใช้กับข้อมูลเส้นทาง:
- M = moveTo
- L = LineTo
- H = LineTo แนวนอน
- V = LineTo แนวตั้ง
- C = curveto
- S = curveto เรียบ
- q = กำลังสองโค้ง Bezier
- t = เรียบกำลังสอง Bezier curveto
- A = โค้งวงรี
- Z = closepath
หมายเหตุ: คำสั่งดังกล่าวช่วยให้อักษรตัวพิมพ์เล็ก ทุนหมายถึงตำแหน่งแน่นอนตำแหน่งญาติบ่งชี้ตัวพิมพ์เล็ก
ตัวอย่างที่ 1
ตัวอย่างข้างต้นกำหนดเส้นทางที่เริ่มต้นที่ตำแหน่ง 1500, 75200 ถึงตำแหน่งแล้วจากที่นั่นไป 225 200 1500 และเส้นทางปิดท้าย
นี่คือรหัส SVG:
ตัวอย่าง
<path D = "0 M150 L75 L225 200 200 Z" />
</ อน>
ลอง»
สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)
ตัวอย่างที่ 2
โดยใช้เส้นโค้ง Bezier โมเดลโค้งเรียบที่สามารถปรับไปเรื่อย ๆ ภายใต้สถานการณ์ปกติผู้ใช้เลือกหนึ่งหรือสองจุดสิ้นสุดและสองจุดควบคุม จุดควบคุมของเส้นโค้ง Bezier ที่เรียกว่าเส้นโค้ง Bezier กำลังสองและสองจุดควบคุมที่เรียกว่าก้อน
ตัวอย่างต่อไปนี้สร้าง Bezier เส้นโค้งกำลังสอง, A และ C เป็นจุดเริ่มต้นและสิ้นสุด B เป็นจุดควบคุม:
นี่คือรหัส SVG:
ตัวอย่าง
<path id = "lineAB" D = "100 M 350 L 150 -300" จังหวะ = "สีแดง"
จังหวะ width = "3" เติม = "ไม่มี" />
<path id = "lineBC" D = "M 250 L 150 50 300" จังหวะ = "สีแดง"
จังหวะ width = "3" เติม = "ไม่มี" />
<path D = "175 M 200 L 150 0" จังหวะ = "สีเขียว" จังหวะ width = "3"
กรอก = "ไม่มี" />
<path d = "เอ็ม 100 350 Q 150 -300 300 0" จังหวะ = "สีฟ้า"
จังหวะ width = "5" เติม = "ไม่มี" />
<! - มาร์คจุดที่เกี่ยวข้อง ->
<G จังหวะ = "สีดำ" จังหวะ width = "3" เติม = "สีดำ">
<วงกลม id = "pointA" cx = "100" cy = "350" R = "3" />
<วงกลม id = "pointB" cx = "250" cy = "50" R = "3" />
<วงกลม id = "pointC" cx = "400" cy = "350" R = "3" />
</ G>
<! - ป้ายจุด ->
<G font-size = "30" font = "Sans-serif" เติม = "สีดำ" จังหวะ = "ไม่มี"
ข้อความสมอ = "กลาง">
<ข้อความ x = "100" Y = "350" DX = "- 30"> เอ </ ข้อความ>
<ข้อความ x = "250" Y = "50" DY = "- 10"> B </ ข้อความ>
<ข้อความ x = "400" Y = "350" DX = "30"> C </ ข้อความ>
</ G>
</ อน>
ลอง»
สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)
ซับซ้อน? ใช่! ! เพราะเมื่อวาดซับซ้อนเส้นทางก็ขอแนะนำให้ใช้โปรแกรมแก้ไข SVG ในการสร้างกราฟิกที่ซับซ้อน