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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - com_MJUpgrade ไม่สามารถติดตั้งได้ใน Joomla เวอร์ชัน 3.x
โดย Parichat ส 23 มิ.ย. 2018 5:27 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
1
ส 23 มิ.ย. 2018 5:27 pm โดย Parichat
B - ไม่สามารถ Copy สินค้าได้ [2018-05][030]
โดย Rujikon ส 23 มิ.ย. 2018 4:52 pm บอร์ด Hachanna - Testter
0
3
ส 23 มิ.ย. 2018 4:52 pm โดย Rujikon
การดูคำสั่ง sql ใน joomla
โดย Parichat ส 23 มิ.ย. 2018 3:31 pm บอร์ด Joomla Developing Knowledge
0
11
ส 23 มิ.ย. 2018 3:31 pm โดย Parichat
ปัญหา key ข้อมูลแล้ว error
โดย wilawan ส 23 มิ.ย. 2018 1:35 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
1
7
ส 23 มิ.ย. 2018 1:58 pm โดย mindphp
Alloy - Product ที่ยังไม่มีในระบบ
โดย wilawan ส 23 มิ.ย. 2018 12:18 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
0
4
ส 23 มิ.ย. 2018 12:18 pm โดย wilawan
ตรวจสอบ BPMN Zenith Workflow
โดย wilawan ส 23 มิ.ย. 2018 11:52 am บอร์ด Mindphp Task (ทดลองงาน)
0
2
ส 23 มิ.ย. 2018 11:52 am โดย wilawan
Google sheet ถ้าอยู่ที่ไฟล์ แล้วจะย้อนกลับมาหน้าแสดงรายละเอียดใน folder อย่างไร
โดย blackskulla ส 23 มิ.ย. 2018 11:10 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
24
ส 23 มิ.ย. 2018 11:14 am โดย thatsawan
ฺB - ไม่สามารถคืนสินค้าเข้าคลังของเสียหายได้ [2018-06][011]
โดย Rujikon ส 23 มิ.ย. 2018 11:10 am บอร์ด Hachanna - Testter
0
1
ส 23 มิ.ย. 2018 11:10 am โดย Rujikon
Q - ถ้ามีการให้ลูกค้ายืมสินค้าจะต้องดำเนินการอย่างไร [2018-06][012]
โดย Rujikon ส 23 มิ.ย. 2018 10:53 am บอร์ด Hachanna - Testter
0
4
ส 23 มิ.ย. 2018 10:53 am โดย Rujikon
B - เข้าดูข้อมูลการนัดคนเข้ามาสัมภาษณ์งานใน Application ไม่ได้
โดย watcharin ส 23 มิ.ย. 2018 10:25 am บอร์ด M.D.Soft Co.,Ltd. - Tester
1
1
ส 23 มิ.ย. 2018 10:29 am โดย watcharin
งานประจำวันที่ 23 มิถุนายน 2561
โดย Rujikon ส 23 มิ.ย. 2018 9:52 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
16
ส 23 มิ.ย. 2018 7:23 pm โดย Rujikon
งานประจำวันที่ 23 มิถุนายน 2561
โดย wilawan ส 23 มิ.ย. 2018 9:46 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
2
9
ส 23 มิ.ย. 2018 7:22 pm โดย thatsawan
งานประจำวันที่ 23 มิถุนายน 2561
โดย Parichat ส 23 มิ.ย. 2018 9:34 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
3
ส 23 มิ.ย. 2018 7:06 pm โดย Parichat
B - com_M2OpenERP Migration ติดตั้งได้แต่ไม่สามารถตั้งค่าได้ใน Joomla 3.x
โดย Parichat ศ 22 มิ.ย. 2018 5:55 pm บอร์ด M2OpenERP
0
3
ศ 22 มิ.ย. 2018 5:55 pm โดย Parichat
Q - หน้ารายละเอียดสินค้าให้แสดงราคาเป็น USD ด้วยและTHB ด้วย
โดย Parichat ศ 22 มิ.ย. 2018 2:20 pm บอร์ด Joomla Dev
5
13
ศ 22 มิ.ย. 2018 6:04 pm โดย tsukasaz
B - หน้าข้อมูลสินค้า แสดงพิ้นหลังยาวกว่าเว็บต้นฉบับ
โดย tsukasaz ศ 22 มิ.ย. 2018 1:20 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
2
12
ศ 22 มิ.ย. 2018 6:12 pm โดย tsukasaz
B - หน้าข้อมูลสินค้า ต้องแสดงราคาเป็น USD ด้วย ตามเว็บต้นฉบับ
โดย tsukasaz ศ 22 มิ.ย. 2018 1:17 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
9
ศ 22 มิ.ย. 2018 6:02 pm โดย tsukasaz
B - หน้าข้อมูลสินค้า เมื่อเลือกสีสินค้า รูปแบบของราคาจากตัวหนาเปลี่ยนเป็นตัวปกติ
โดย tsukasaz ศ 22 มิ.ย. 2018 1:09 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
5
ศ 22 มิ.ย. 2018 1:46 pm โดย Parichat
B - หน้า How to Buy ข้อความเกินขอบพื้นหลัง
โดย tsukasaz ศ 22 มิ.ย. 2018 12:07 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
4
ศ 22 มิ.ย. 2018 1:28 pm โดย Parichat
B - หน้าดาวน์โหลดแสดงผลไม่เหมือนของเดิม ข้อความเกินขอบพื้นหลัง
โดย tsukasaz ศ 22 มิ.ย. 2018 12:04 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
4
ศ 22 มิ.ย. 2018 12:10 pm โดย Parichat