บทนำสู่ SVG 2D ใน HTML5 - บทนำและการใช้การวาดกราฟิก (รูปร่างพื้นฐาน)

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-04-03 02:00:03

รูปร่างพื้นฐาน

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

<svg>

<polyline points = "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"

stroke = "Orange" fill = "โปร่งใส" stroke-width = "5"/>>

<Polygon Points = "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"

stroke = "green" fill = "โปร่งใส" stroke-width = "5"/>>

</svg>

ผลลัพธ์ที่แสดงใน HTML นี้มีดังนี้:

ตัวอย่างนี้วาดรูปทรงมากมาย: สี่เหลี่ยมปกติ, สี่เหลี่ยมโค้งมน, วงกลม, รูปไข่, เส้นตรง, รูปหลายเหลี่ยมและเส้นทาง นี่คือองค์ประกอบกราฟิกพื้นฐานทั้งหมด แม้ว่าจะมีหลายวิธีในการวาดกราฟเช่น rect สามารถนำไปใช้โดยใช้ rect หรือ path เราควร พยายามรักษาเนื้อหาของ SVG ให้สั้นและกระชับและอ่านง่าย

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

สี่เหลี่ยมผืนผ้า - องค์ประกอบ rect

องค์ประกอบนี้มี 6 คุณสมบัติที่ควบคุมตำแหน่งและรูปร่าง ได้แก่ :

X: ค่า x ของพิกัด (ระบบพิกัดผู้ใช้) ของมุมซ้ายบนของสี่เหลี่ยม

Y: ค่า y ของพิกัด (ระบบพิกัดผู้ใช้) ของมุมซ้ายบนของสี่เหลี่ยม

ความกว้าง: ความกว้างของสี่เหลี่ยมผืนผ้า

ความสูง: ความสูงสี่เหลี่ยมผืนผ้า

RX: เมื่อเอฟเฟกต์มุมโค้งมนได้รับรัศมีของมุมโค้งมนตามแนวแกน x

RY: เมื่อบรรลุเอฟเฟกต์มุมโค้งมนรัศมีของมุมโค้งมนตามแนวแกน y

ตัวอย่างเช่นในตัวอย่างข้างต้นเอฟเฟกต์มุมโค้งมนจะบรรลุผลและคุณยังสามารถบรรลุเอฟเฟกต์มุมวงรีโดยการตั้งค่า RX และ RY เป็นค่าที่แตกต่างกัน

วงกลม - องค์ประกอบวงกลม

คุณสมบัติขององค์ประกอบนี้เป็นเรื่องง่ายส่วนใหญ่เพื่อกำหนดศูนย์และรัศมี:

R: รัศมีของวงกลม

CX: x-value ของพิกัดกลาง

CY: ค่า y ของศูนย์พิกัดของวงกลม

วงรี - องค์ประกอบวงรี

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

RX: แกนครึ่งตัว (X RADIUS)

RY: แกนกึ่งสั้น (Y-Radius)

CX: x-value ของพิกัดกลาง

CY: ค่า y ของศูนย์พิกัดของวงกลม

องค์ประกอบบรรทัด

เส้นตรงจำเป็นต้องกำหนดจุดเริ่มต้นและจุดสิ้นสุด:

X1: จุดเริ่มต้น x พิกัด

Y1: จุดเริ่มต้น y พิกัด

x2: จุดสิ้นสุด x พิกัด

Y2: จุดสิ้นสุด y พิกัด

โพลีไลน์ - องค์ประกอบโพลีไลน์

Polylines ส่วนใหญ่จำเป็นต้องกำหนดจุดสิ้นสุดของแต่ละส่วนบรรทัดดังนั้นจึงจำเป็นต้องใช้ชุดของจุดเดียวเป็นพารามิเตอร์:

คะแนน: ชุดของจุดคั่นด้วยช่องว่าง, เครื่องหมายจุลภาค, NewLines ฯลฯ แต่ละจุดจะต้องมี 2 ตัวเลข: ค่า x และค่า y ดังนั้น 3 คะแนนต่อไปนี้ (0,0), (1,1) และ (2,2) สามารถเขียนเป็น: 0 0, 1 1, 2 2

รูปหลายเหลี่ยม - องค์ประกอบรูปหลายเหลี่ยม

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

พา ธ - องค์ประกอบเส้นทาง

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

D: ชุดคำแนะนำการวาดและพารามิเตอร์การวาด (คะแนน)

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

คำแนะนำการวาดพิกัดสัมบูรณ์

พารามิเตอร์ของชุดคำสั่งนี้แสดงถึงพิกัดสัมบูรณ์ สมมติว่าแปรงปัจจุบันอยู่ที่ (x0, y0) คำสั่งประสานงานสัมบูรณ์ต่อไปนี้แสดงถึงความหมายดังนี้:

คำแนะนำ	พารามิเตอร์	อธิบาย
ม.	XY	ย้ายแปรงไปยังจุด (x, y)
l	XY	แปรงดึงส่วนของเส้นจากจุดปัจจุบันไปยังจุด (x, y)
ชม	x	แปรงจะดึงส่วนเส้นแนวนอนจากจุดปัจจุบันไปยังจุด (x, y0)
V	y	แปรงวาดส่วนเส้นแนวตั้งจากจุดปัจจุบันไปยังจุด (x0, y)
อัน	RX ry x-axis-rotation ขนาดใหญ่ arc-flag sweep-flag xy	แปรงดึงส่วนโค้งจากจุดปัจจุบันไปยังจุด (x, y)
C	x1 y1, x2 y2, xy	แปรงดึงเส้นโค้ง bezier ลูกบาศก์จากจุดปัจจุบันไปยังจุด (x, y)
S	x2 y2, xy	Cubic Bezier Curve รุ่นพิเศษ (จุดควบคุมแรกถูกละเว้น)
ถาม	x1 y1, xy	วาดเส้นโค้ง bezier กำลังสองไปยังจุด (x, y)
T	XY	เวอร์ชันพิเศษของ Quadratic Bezier Curve (ตัดจุดควบคุม)
Z	ไม่มีพารามิเตอร์	วาดรูปที่ปิดและหากแอตทริบิวต์ D ไม่ได้ระบุคำสั่ง Z ให้วาดเซ็กเมนต์บรรทัดแทนรูปที่แนบมา

ย้ายคำสั่งแปรง m, วาดคำสั่งบรรทัด: l, h, v และปิดคำสั่ง z ทั้งหมดค่อนข้างง่าย ต่อไปนี้คือการมุ่งเน้นไปที่คำแนะนำไม่กี่คำสำหรับการวาดเส้นโค้ง คำแนะนำในการวาดภาพอาร์ค: RX RY X-Axis-Rotation Sweep-Flag XY ขนาดใหญ่

มันซับซ้อนมากขึ้นในการเชื่อมต่อ 2 คะแนนกับส่วนโค้งและมีหลายสถานการณ์ดังนั้นคำสั่งนี้มีพารามิเตอร์ 7 ตัวซึ่งควบคุมแต่ละแอตทริบิวต์ของเส้นโค้ง ต่อไปนี้อธิบายความหมายของค่าตัวเลข:

RX, RY คือความยาวของแกนกึ่ง-มาเจและแกนกึ่งสั้นของส่วนโค้ง

X-Axis-Rotation เป็นมุมระหว่างแกน x และทิศทางแนวนอนที่ส่วนโค้งนี้อยู่นั่นคือมุมการหมุนทวนเข็มนาฬิกาของแกน x และจำนวนลบแสดงถึงมุมของการหมุนตามเข็มนาฬิกา

แฟลชขนาดใหญ่-อาร์คคือ 1 เพื่อแสดงส่วนโค้งมุมขนาดใหญ่และ 0 เพื่อแสดงส่วนโค้งมุมเล็ก ๆ

Sweep-Flag คือ 1 ซึ่งแสดงถึงส่วนโค้งจากจุดเริ่มต้นไปยังจุดสิ้นสุดตามเข็มนาฬิการอบศูนย์และ 0 แสดงถึงทิศทางทวนเข็มนาฬิกา

x, y เป็นพิกัดเทอร์มินัลอาร์ค

ฉันจะไม่พูดถึงพารามิเตอร์สองตัวแรกและพารามิเตอร์สองตัวสุดท้ายมันง่ายมาก พูดคุยเกี่ยวกับพารามิเตอร์สามตัวที่อยู่ตรงกลาง:

X-Axis-Rotation หมายถึงมุมการหมุนและสัมผัสกับความแตกต่างของส่วนโค้งในตัวอย่างต่อไปนี้:

<svg>

<path d = "M10 315

l 110 215

A 30 50 0 0 1 162.55 162.45

l 172.55 152.45

A 30 50 -45 0 1 215.1 109.9

l 315 10 "stroke =" black "fill =" green "stroke-width =" 2 "Fill-Opacity =" 0.5 "/>

</svg>

HTML ด้านบนวาดรูปต่อไปนี้:

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

ขนาดใหญ่-อาร์คฟอลและการกวาดฟันควบคุมขนาดและทิศทางของส่วนโค้งและสัมผัสกับความแตกต่างในส่วนโค้งในตัวอย่างต่อไปนี้:

<svg>

<path d = "M80 80

A 45 45, 0, 0, 0, 125 125

l 125 80 z "fill =" green "/>>>

<path d = "M230 80

A 45 45, 0, 1, 0, 275 125

l 275 80 z "fill =" red "/>>>

<path d = "M80 230

A 45 45, 0, 0, 1, 125 275

l 125 230 z "fill =" สีม่วง "/>

<path d = "M230 230

A 45 45, 0, 1, 1, 275 275

l 275 230 z "fill =" blue "/>

</svg>

HTML นี้วาดภาพต่อไปนี้:

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

คำแนะนำเส้นโค้ง bezier cubic bezier: C x1 y1, x2 y2, xy

มีจุดควบคุมสองจุดในเส้นโค้ง bezier ลูกบาศก์คือ (x1, y1) และ (x2, y2) และสุดท้าย (x, y) หมายถึงจุดสิ้นสุดของเส้นโค้ง สัมผัสกับตัวอย่างต่อไปนี้:

<svg>

</svg>

ตัวอย่าง HTML นี้วาดรูปต่อไปนี้:

จากด้านบนเราจะเห็นว่าจุดควบคุมควบคุมเรเดียนของเส้นโค้ง

Cubic Bezier Curve รุ่นพิเศษ: SX2 Y2, XY

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

<svg>

</svg>

ชิ้นส่วน HTML นี้ถูกวาดดังนี้:

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

คำแนะนำเส้นโค้ง bezier กำลังสอง: QX1 Y1, XY, T XY (รุ่นพิเศษของเส้นโค้ง Bezier กำลังสอง)

เส้นโค้ง bezier กำลังสองมีเพียงจุดควบคุมเดียว (x1, y1) ซึ่งมักจะแสดงในรูปด้านล่าง:

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

<svg>

</svg>

ชิ้นส่วน HTML นี้ถูกวาดดังนี้:

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

คำแนะนำการวาดภาพประสาน

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

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

หมายเหตุเกี่ยวกับการวาดเส้นทาง SVG:

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

การอ้างอิงเชิงปฏิบัติ:

ดัชนีสคริปต์: http://msdn.microsoft.com/zh-cn/library/ff97110(v=vs.85).aspx

ศูนย์พัฒนา: https://developer.mozilla.org/en/svg

ข้อมูลอ้างอิงยอดนิยม: http://www.chinasvg.com/

เอกสารอย่างเป็นทางการ: http://www.w3.org/tr/svg11/