ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 4 HTML5 SVG 
    SVG คือแท็กที่ใช้สำหรับการวาดกราฟิกแบบเวกเตอร์ SVG ย่อมาจาก scalable Vector Graphic เป็นภาษาที่สามารถประมวลผลข้อมูลแบบ Graphic 2 มิติ
ความต่างที่สำคัญของ SVG กับ canvas คือ
1.SVG ได้ผลลัพธ์เป็นเวกเตอร์ ส่วน canvas ได้ผลลัพธ์เป็นราสเตอร์ (ภายในกรอบวัตถุ canvas)
2.SVG สั่งวาดด้วยแท็กแบบ markup (ซับเซ็ตของ XML) ส่วน canvas สั่งวาดด้วย JavaScript
ข้อดีของ SVG
1.สามารถย่อ-ขยายภาพ โดยที่ภาพยังคงความคมชัด
ข้อเสียของ SVG
2.ยังไม่รองรับในบาง Web Browser
ตัวอย่าง

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
 
</body>
</html>

ผลลัพธ์คือ

นี่เป็นตัวอย่างไฟล์ SVG แบบง่ายๆ ซึ่งจะแสดงผลออกมาเป็นวงกลม โดยมีรายละเอียดต่างๆ ตาม XML data ที่เราใส่เข้าไปดังนี้ครับ
1.cx, cy คือ พิกัด x, y ของจุดศูนย์กลางของวงกลม หากไม่ใส่ จะมีค่าเป็น 0
2.r คือ รัศมีของวงกลม
3.stroke คือ สีของเส้นขอบ
4.stroke-width คือ ความหนาของเส้นขอบ
5.fill คือ สีของกราฟฟิกที่สร้างขึ้น
  
   นอกจากนี้ SVG ยังสามารถสร้างรูปทรง (shape) ต่างๆ ได้มากมาย เช่น
1.Rectangle <rect>
2.Circle <circle>
3.Ellipse <ellipse>
4.Line <line>
5.Polyline <polyline>
6.Polygon <polygon>
7.Path <path>

   ซึ่งแต่ละ shape ก็จะมี attribute ต่างๆ มาให้เรากำหนดค่า เพื่อให้แสดงผลออกมาตามต้องการ


ข้อมูลอ้างอิง
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ภาษาซี กับ โจทย์ คำนวณ BMI
โดย Aussadawut ส 17 พ.ย. 2018 7:34 pm บอร์ด Share Knowledge
0
11
ส 17 พ.ย. 2018 7:34 pm โดย Aussadawut
list หัวข้อเเชร์ความรู้
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 7:18 pm บอร์ด MT27 - ธวัชชัย แสนหาญ
0
2
ส 17 พ.ย. 2018 7:18 pm โดย ธวัชชัย แสนหาญ
การใช้ Foreach loop Statements ใน python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 7:16 pm บอร์ด Python Knowledge
0
12
ส 17 พ.ย. 2018 7:16 pm โดย ธวัชชัย แสนหาญ
การกำหนดค่าให้ for if
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 7:12 pm บอร์ด PHP Knowledge
0
10
ส 17 พ.ย. 2018 7:12 pm โดย จันนุสรณ์ ดีแก่
การสร้างสูตรคูณ ในภาษา php แบบสั้นๆ
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 6:55 pm บอร์ด PHP Knowledge
0
9
ส 17 พ.ย. 2018 6:55 pm โดย จันนุสรณ์ ดีแก่
การUpdateค่าในตัวแปรชนิด list ใน python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 6:45 pm บอร์ด Python Knowledge
0
8
ส 17 พ.ย. 2018 6:45 pm โดย ธวัชชัย แสนหาญ
การใชังานตัวแปร dictionary ใน python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 6:19 pm บอร์ด Share Knowledge
0
10
ส 17 พ.ย. 2018 6:19 pm โดย ธวัชชัย แสนหาญ
การใช้เงื่อนไข switch case
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 6:12 pm บอร์ด PHP Knowledge
0
6
ส 17 พ.ย. 2018 6:12 pm โดย จันนุสรณ์ ดีแก่
ภาษาซี กับ โจทย์ Loop ในตำนาน (7) รับค่าตัวเลขไปเรื่อยๆจนกว่าจะเจอเลข 0 แล้วจึงหยุดรับค่า พร้อมทั้งนับว่าหารด้วย 5 ลงตัว
โดย Aussadawut ส 17 พ.ย. 2018 6:08 pm บอร์ด Share Knowledge
0
11
ส 17 พ.ย. 2018 6:08 pm โดย Aussadawut
การกำหนดตัวแปร ใน python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 5:09 pm บอร์ด Share Knowledge
0
10
ส 17 พ.ย. 2018 5:09 pm โดย ธวัชชัย แสนหาญ
ภาษาซี กับ โจทย์ Loop ในตำนาน (6) รับค่าตัวเลขไปเรื่อยๆจนกว่าจะเจอเลข 0 แล้วจึงหยุดรับค่า
โดย Aussadawut ส 17 พ.ย. 2018 4:59 pm บอร์ด Share Knowledge
0
11
ส 17 พ.ย. 2018 4:59 pm โดย Aussadawut
ภาษาซี กับ โจทย์ Loop ในตำนาน (5) แสดงเลขคู่/คี่ ด้วย Loop do while ตั้ง 0 จนถึง 100
โดย Aussadawut ส 17 พ.ย. 2018 4:23 pm บอร์ด Share Knowledge
0
11
ส 17 พ.ย. 2018 4:23 pm โดย Aussadawut
ภาษาซี กับ โจทย์ Loop ในตำนาน (4) แสดงเลขคู่/คี่ ด้วย Loop for ตั้ง 0 จนถึง 100
โดย Aussadawut ส 17 พ.ย. 2018 3:23 pm บอร์ด Share Knowledge
0
16
ส 17 พ.ย. 2018 3:23 pm โดย Aussadawut
การสืบทอด Class แบบ Object-Oriented หรือ OOP ใน Python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 3:20 pm บอร์ด Python Knowledge
0
12
ส 17 พ.ย. 2018 3:20 pm โดย ธวัชชัย แสนหาญ
ภาษาซี กับ โจทย์ Loop ในตำนาน (3) แสดงเลขคู่/คี่ ด้วย Loop while ตั้ง 0 จนถึง 100
โดย Aussadawut ส 17 พ.ย. 2018 2:57 pm บอร์ด Share Knowledge
0
14
ส 17 พ.ย. 2018 2:57 pm โดย Aussadawut
การใช้ Overriding Method ใน python
โดย ธวัชชัย แสนหาญ ส 17 พ.ย. 2018 2:33 pm บอร์ด Python Knowledge
0
10
ส 17 พ.ย. 2018 2:33 pm โดย ธวัชชัย แสนหาญ
VDO - วิธีการใช้งาน gitlab (กิตแลบ)
โดย prakon ส 17 พ.ย. 2018 1:58 pm บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
3
ส 17 พ.ย. 2018 1:58 pm โดย prakon
python 2.7 หารตัวเลขเป็น ทศนิยมไม่ได้ แก้ไขยังไงได้บ้างค่ะ
โดย thatsawan ส 17 พ.ย. 2018 12:48 pm บอร์ด Programming - C/C++ & java & Python
3
26
ส 17 พ.ย. 2018 1:14 pm โดย thatsawan
คำสั่งตัดสินใจการทำงาน if, if else if
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 12:13 pm บอร์ด PHP Knowledge
0
10
ส 17 พ.ย. 2018 12:13 pm โดย จันนุสรณ์ ดีแก่
การใช้ operator ในการกำหนดเงื่อนไขใน php
โดย จันนุสรณ์ ดีแก่ ส 17 พ.ย. 2018 11:11 am บอร์ด PHP Knowledge
0
12
ส 17 พ.ย. 2018 11:11 am โดย จันนุสรณ์ ดีแก่