กราฟิก HTML

กราฟิก หน้าแรก

Google Maps

แนะนำแผนที่ แผนที่พื้นฐาน การวางซ้อนแผนที่ กิจกรรมของแผนที่ การควบคุมแผนที่ ประเภทแผนที่ แผนที่อ้างอิง

กวดวิชา SVG

บทนำ SVG SVG ใน HTML SVG สี่เหลี่ยมผืนผ้า SVG Circle SVG วงรี สาย SVG รูปหลายเหลี่ยม SVG SVG Polyline เส้นทาง SVG ข้อความ SVG SVG ลากเส้น บทนำตัวกรอง SVG เอฟเฟกต์เบลอ SVG SVG Drop Shadows SVG ลิเนียร์ SVG Radial ตัวอย่าง SVG ข้อมูลอ้างอิง SVG

กวดวิชาผ้าใบ

แนะนำผ้าใบ ภาพวาดบนผืนผ้าใบ พิกัดผ้าใบ ผ้าใบไล่โทนสี ข้อความผ้าใบ ภาพแคนวาส อ้างอิงผ้าใบ

นาฬิกาผ้าใบ

แนะนำนาฬิกา หน้าปัดนาฬิกา ตัวเลขนาฬิกา เข็มนาฬิกา นาฬิกาเริ่ม

เกม HTML

แนะนำเกม เกมแคนวาส ส่วนประกอบของเกม ตัวควบคุมเกม อุปสรรคของเกม คะแนนเกม รูปภาพเกม เสียงเกม เกมแรงโน้มถ่วง เกมเด้ง การหมุนเกม การเคลื่อนไหวของเกม

SVG <polyline>


SVG Polyline - <polyline>

ตัวอย่าง 1

องค์ประกอบ <polyline> ใช้เพื่อสร้างรูปร่างใดๆ ที่ประกอบด้วยเส้นตรงเท่านั้น (ที่เชื่อมต่อหลายจุด):

Sorry, your browser does not support inline SVG.

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

ตัวอย่าง

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

คำอธิบายรหัส:

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

ตัวอย่าง 2

อีกตัวอย่างหนึ่งที่มีเพียงเส้นตรง:

Sorry, your browser does not support inline SVG.

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

ตัวอย่าง

<svg height="180" width="500">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:white;stroke:red;stroke-width:4" />
</svg>