Latest web development tutorials

SVG รูปหลายเหลี่ยม

SVG รูปหลายเหลี่ยม - <รูปหลายเหลี่ยม>

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

<รูปหลายเหลี่ยม> แท็กที่ใช้ในการสร้างกราฟิกที่มีอย่างน้อยสามด้าน

รูปหลายเหลี่ยมเป็นเส้นตรงรูปร่างคือ "ปิด" (ทุกสายเชื่อมต่อ)

คำพูด รูปหลายเหลี่ยมจากกรีซ "โพลี" A "จำนวนมาก", "gon" หมายถึง "มุม"

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

ตัวอย่าง

<xmlns อน = "http://www.w3.org/2000/svg" รุ่น = "1.1">
<รูปหลายเหลี่ยมคะแนน = "200,10 250,190 160,210"
style = "เติม: มะนาว; จังหวะ: สีม่วง; จังหวะความกว้าง: 1" />
</ อน>

ลอง»

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)

การวิเคราะห์รหัสสินค้า:

  • x และ y พิกัดของจุดที่กำหนดแอตทริบิวต์สำหรับมุมของรูปหลายเหลี่ยมแต่ละ

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

ตัวอย่างต่อไปนี้สร้างรูปหลายเหลี่ยมสี่ด้าน:

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

ตัวอย่าง

<xmlns อน = "http://www.w3.org/2000/svg" รุ่น = "1.1">
<รูปหลายเหลี่ยมคะแนน = "220,10 300.210 170.250 123.234"
style = "เติม: มะนาว; จังหวะ: สีม่วง; จังหวะความกว้าง: 1" />
</ อน>

ลอง»

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)

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

การใช้งาน <รูปหลายเหลี่ยม> องค์ประกอบในการสร้างดาว:

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

ตัวอย่าง

<xmlns อน = "http://www.w3.org/2000/svg" รุ่น = "1.1">
<รูปหลายเหลี่ยมคะแนน = "100,10 40.180 190,60 10,60 160.180"
style = "เติม: มะนาว; จังหวะ: สีม่วง; จังหวะความกว้าง: 5; เติมกฎ: ภัณฑ์;" />
</ อน>

ลอง»

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)

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

เปลี่ยนเติมกฎแอตทริบิวต์ "evenodd":

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

ตัวอย่าง

<xmlns อน = "http://www.w3.org/2000/svg" รุ่น = "1.1">
<รูปหลายเหลี่ยมคะแนน = "100,10 40.180 190,60 10,60 160.180"
style = "เติม: มะนาว; จังหวะ: สีม่วง; จังหวะความกว้าง: 5; เติมกฎ: evenodd;" />
</ อน>

ลอง»

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)