ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
Code ของผังบัญชี ความหมายของแต่ละหลักคืออะไร
โดย araxvaan ส 24 มิ.ย. 2017 6:46 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
3
ส 24 มิ.ย. 2017 6:46 pm โดย araxvaan
python ดึก part ยังไงคับ
โดย nuattawoot ส 24 มิ.ย. 2017 3:42 pm บอร์ด Programming - C/C++ & java & Python
2
6
ส 24 มิ.ย. 2017 3:42 pm โดย nuattawoot
เข้า facebook ไม่ได้
โดย บุคคลทั่วไป ศ 23 มิ.ย. 2017 6:57 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
8
ศ 23 มิ.ย. 2017 6:57 pm โดย บุคคลทั่วไป
แก้ปัญหา rsync แล้ว Error .ssh/known_hosts
โดย mindphp ศ 23 มิ.ย. 2017 6:54 pm บอร์ด Linux - Web Server
1
6
ศ 23 มิ.ย. 2017 6:54 pm โดย mindphp
RFID หรือ NFC อ่านค่าได้จากระยะไกลสุดเท่าไหร่
โดย Oh_nO ศ 23 มิ.ย. 2017 10:55 am บอร์ด Mobile Programming - Android, iOS, Window Phone
1
21
ศ 23 มิ.ย. 2017 10:55 am โดย nuattawoot
สอบถามนิยามหรือความหมายของคำว่า Subscriber กับ Digest Subscriber ในเรื่องของ Mailing list ค่ะ
โดย araxvaan พฤ 22 มิ.ย. 2017 9:33 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
9
พฤ 22 มิ.ย. 2017 9:33 pm โดย araxvaan
โปรแกรมต่อ Video (วีดีโอ) ด้วย Python
โดย nuattawoot พฤ 22 มิ.ย. 2017 7:10 pm บอร์ด Programming - C/C++ & java & Python
0
25
พฤ 22 มิ.ย. 2017 7:10 pm โดย nuattawoot
สอบถามเรื่องการดึงข้อมูลสุดท้ายจาก ฐานข้อมูลมาแสดงใช้คำสั่งอะไรครับ
โดย AePongsak พฤ 22 มิ.ย. 2017 5:06 pm บอร์ด Programming - PHP
1
23
พฤ 22 มิ.ย. 2017 5:06 pm โดย thatsawan
เพิ่มข้อมูลลงSQL เพิ่มไปแล้ว ตอนแสดงจะให้แสดงID ล่าสุดที่เพิ่มเข้าไปยังไงครับ
โดย nuattawoot พ 21 มิ.ย. 2017 7:28 pm บอร์ด Programming - C/C++ & java & Python
4
40
พ 21 มิ.ย. 2017 7:28 pm โดย nuattawoot
ส่งข้อมูลข้ามฟอร์มแล้ว ข้อมูลไม่แสดง แต่ตารางแสดงครบ
โดย nuattawoot พ 21 มิ.ย. 2017 5:13 pm บอร์ด Programming - C/C++ & java & Python
1
13
พ 21 มิ.ย. 2017 5:13 pm โดย nuattawoot
แนะนำ MySQL Store Procedure
โดย moomai พ 21 มิ.ย. 2017 5:01 pm บอร์ด Mindphp Videoman
0
11
พ 21 มิ.ย. 2017 5:01 pm โดย moomai
สอบถามการใช้คำสั่ง ORDER BY ของ phpBB ตอน SELECT ข้อมูล
โดย AePongsak พ 21 มิ.ย. 2017 1:51 pm บอร์ด Programming - PHP
4
37
พ 21 มิ.ย. 2017 1:51 pm โดย AePongsak
สอบถามเรื่องการเขียนโค๊ด python ภายใต็ HTML
โดย nuattawoot พ 21 มิ.ย. 2017 11:56 am บอร์ด Programming - C/C++ & java & Python
1
27
พ 21 มิ.ย. 2017 11:56 am โดย mindphp
โดยทั่วไปใช้ Framework ตัวไหนครับ
โดย toonytoony2004 อ 20 มิ.ย. 2017 10:19 pm บอร์ด Joomla Development
1
41
อ 20 มิ.ย. 2017 10:19 pm โดย tsukasaz
สอบถามเรื่องการรัน Flask มัน Error
โดย nuattawoot อ 20 มิ.ย. 2017 6:48 pm บอร์ด Programming - C/C++ & java & Python
1
17
อ 20 มิ.ย. 2017 6:48 pm โดย nuattawoot
สอบถามเรื่อง คำสั่งที่ใช้จัดวางตำแหน่งข้อมูลในตาราง
โดย AePongsak อ 20 มิ.ย. 2017 5:34 pm บอร์ด Programming - PHP
4
33
อ 20 มิ.ย. 2017 6:28 pm โดย AePongsak
สอบถามการตั้งค่า Calendars and Contact ใน cPanel
โดย araxvaan อ 20 มิ.ย. 2017 5:45 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
23
อ 20 มิ.ย. 2017 5:45 pm โดย araxvaan
ใช้โปรแกม pycham เขียน python จะติดต่อฐานข้อมูลยังไงครับ
โดย nuattawoot อ 20 มิ.ย. 2017 10:34 am บอร์ด Programming - C/C++ & java & Python
6
118
อ 20 มิ.ย. 2017 10:34 am โดย nuattawoot
สอบถามรายละเอียดของการตั้งค่า Configure Email Routing ของ cPanel
โดย araxvaan จ 19 มิ.ย. 2017 11:07 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
50
จ 19 มิ.ย. 2017 11:07 pm โดย araxvaan
สอบถามนิยาม หรือคำจำกัดความของ GnuPG ว่าคืออะไร
โดย araxvaan จ 19 มิ.ย. 2017 5:39 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
44
จ 19 มิ.ย. 2017 5:39 pm โดย araxvaan