home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีวาดรูปทรงต่างๆ ด้วย SVG ใน HTML5

บทนำ

SVG (Scalable Vector Graphics) ใช้สำหรับวาดกราฟิกเวกเตอร์ 2 มิติใน HTML5 สามารถวาดรูปทรงพื้นฐานได้ง่ายๆ

รูปทรงหลักใน SVG

แท็กคำอธิบายแอตทริบิวต์หลัก
<rect>สี่เหลี่ยมผืนผ้าx, y, width, height, rx, ry
<circle>วงกลมcx, cy, r
<ellipse>วงรีcx, cy, rx, ry
<line>เส้นตรงx1, y1, x2, y2
<polyline>เส้นโป๊ล리라นpoints
<polygon>รูปหลายเหลี่ยมpoints
<path>เส้นทางซับซ้อนd (path data)

ตัวอย่างสี่เหลี่ยมผืนผ้า

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem { position: relative; left: 10%; transform: translateX(-20%); }
    </style>
    <title>SVG Rectangle</title>
  </head>
  <body>
    <h2>HTML5 SVG Rectangle</h2>
    <svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
      <rect width="200" height="100" fill="green" />
    </svg>
  </body>
</html>