HTML5 SVG
SVG คืออะไร?
- SVG ย่อมาจาก Scalable กราฟิกแบบเวกเตอร์
- SVG ใช้เพื่อกำหนดกราฟิกสำหรับเว็บ
- SVG เป็นคำแนะนำ W3C
ใช้ HTML <SVG> ธาตุ
ใช้ HTML <SVG> องค์ประกอบเป็นภาชนะสำหรับกราฟิก SVG
SVG มีหลายวิธีในการวาดภาพเส้นทางกล่องวงการข้อความและภาพกราฟิก
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ <SVG> องค์ประกอบ
SVG วงกลม
SVG สี่เหลี่ยมผืนผ้า
SVG โค้งสี่เหลี่ยมผืนผ้า
ทดลองกดตรงนี้
SVG ดาว
ทดลองกดตรงนี้
SVG โลโก้
ทดลองกดตรงนี้
ความแตกต่างระหว่าง SVG และ Canvas
SVG ภาษาสำหรับการอธิบายกราฟิก 2D ในรูปแบบ XMLผ้าใบวาดภาพกราฟิก 2D, เกี่ยวกับการบิน (กับจาวาสคริปต์)
SVG เป็น XML ตามซึ่งหมายความว่าทุกองค์ประกอบสามารถใช้ได้ภายใน DOM แล้ว SVG คุณสามารถแนบ JavaScript จัดการเหตุการณ์สำหรับองค์ประกอบ
ใน SVG แต่ละรูปวาดจำได้ว่าเป็นวัตถุ ถ้าลักษณะของวัตถุที่มีการเปลี่ยนแปลง SVG, เบราว์เซอร์สามารถอีกครั้งโดยอัตโนมัติทำให้รูปร่าง
ผ้าใบมีการแสดงพิกเซลโดยพิกเซล ในผ้าใบเมื่อวาดกราฟฟิกก็จะถูกลืมโดยเบราว์เซอร์ ถ้าตำแหน่งที่ควรจะมีการเปลี่ยนแปลงฉากทั้งหมดจะต้องมีการวาดใหม่รวมทั้งวัตถุใด ๆ ที่อาจได้รับการคุ้มครองโดยกราฟิก
เปรียบเทียบผ้าใบและ SVG
ตารางด้านล่างแสดงให้เห็นความแตกต่างที่สำคัญบางอย่างระหว่างผ้าใบและ SVG:
HTML Google Maps
Google แผนที่ช่วยให้คุณแสดงแผนที่บนหน้าเว็บของคุณ:หน้าเว็บพื้นฐาน
แสดงให้เห็นถึงวิธีการเพิ่ม Google แผนที่ไปยังหน้าเว็บเราจะใช้หน้า HTML พื้นฐาน:ทดลองกดตรงนี้
ตั้งค่าขนาดแผนที่
กำหนดขนาดของแผนที่:ทดลองกดตรงนี้
สร้างฟังก์ชั่นการตั้งค่าแผนที่คุณสมบัติ
ตัวอย่างนี้กำหนดแผนที่ Google ศูนย์กลางในกรุงลอนดอนประเทศอังกฤษ:ทดลองกดตรงนี้
ตัวอย่างอธิบาย
mapOptionsตัวแปรกำหนดคุณสมบัติของแผนที่ศูนย์ทรัพย์สินระบุตำแหน่งที่จะอยู่ตรงกลางแผนที่ (โดยใช้พิกัดละติจูดและลองจิจูด)
ซูมคุณสมบัติระบุระดับการซูมสำหรับแผนที่ (ลองทดสอบกับระดับการซูม)
MapTypeIdคุณสมบัติระบุประเภทแผนที่เพื่อแสดง ประเภทแผนที่ดังต่อไปนี้ได้รับการสนับสนุน: ผังดาวเทียมแบบผสมและภูมิประเทศ
บรรทัด: แผนที่ var = ใหม่ google.maps.Map (document.getElementById ( "แผนที่") mapOptions); สร้างแผนที่ใหม่ภายในองค์ประกอบ <div> มี id = "แผนที่" โดยใช้พารามิเตอร์ที่จะถูกส่งผ่าน (mapOptions)
เพิ่ม Google Maps API
สุดท้ายแสดงแผนที่บนหน้า!การทำงานของแผนที่ที่ให้บริการโดยห้องสมุด JavaScript อยู่ที่ Google เพิ่มสคริปต์เพื่ออ้างถึง Google Maps API ที่มีฟังก์ชั่นการโทรกลับเพื่อ MyMap ที่นี้:
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น