SVG <rect>

รูปทรงของ SVG

SVG มีองค์ประกอบรูปที่ถูกกำหนดมาก่อนเพื่อใช้โดยนักพัฒนา:

• สี่เหลี่ยม <rect>
• วงกลม <circle>
• รูปวงกลมทรงเรียบ <ellipse>
• เส้นตรง <line>
• เส้นต่ำ <polyline>
• รูปหลายเหลี่ยม <polygon>
• เส้นทาง <path>

บทที่ต่อไปจะเริ่มตั้งแต่องค์ประกอบ rect และอธิบายเกี่ยวกับองค์ประกอบทุกองค์

SVG รูปสี่เหลี่ยมตัด - <rect>

ตัวอย่าง 1

<rect> องค์ประกอบเป็นส่วนที่ใช้สร้างสี่เหลี่ยมผืนผ้าและรูปร่างที่เป็นส่วนย่อยของสี่เหลี่ยมผืนผ้า:

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

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

ลองทดลองด้วยตัวเอง

การอธิบายรหัส

• ตัวแปร width และ height ขององค์ประกอบ <rect> กำหนดความสูงและความกว้างของสี่เหลี่ยมผืนผ้า
• ตัวแปร style ใช้กำหนดคุณสมบัติ CSS ของสี่เหลี่ยมผืนผ้า
• ตัวแปร fill ของ CSS กำหนดสีที่ทำความติดตามของสี่เหลี่ยมผืนผ้า
• ตัวแปร border-width ของ CSS กำหนดความหนาของขอบสี่เหลี่ยมผืนผ้า
• ตัวแปร stroke ของ CSS กำหนดสีของขอบสี่เหลี่ยมผืนผ้า

ตัวอย่าง 2

ให้ดูตัวอย่างอื่นที่มีคุณสมบัติใหม่:

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

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

ลองทดลองด้วยตัวเอง

การอธิบายรหัส

• ตัวแปร x กำหนดตำแหน่งด้านซ้ายของสี่เหลี่ยมผืนผ้า (ตัวอย่าง: x="50" จะทำให้สี่เหลี่ยมผืนผ้าตั้งอยู่ที่ระยะห่างจากขอบซ้าย 50 px)
• ตัวแปร y กำหนดตำแหน่งด้านบนของสี่เหลี่ยมผืนผ้า (ตัวอย่าง: y="20" จะทำให้สี่เหลี่ยมผืนผ้าตั้งอยู่ที่ระยะห่างจากขอบบน 20 px)
• ตัวแปร fill-opacity ของ CSS กำหนดค่าลึกลงของสีที่ทำความติดตาม (ขอบเขตที่ถูกต้อง: 0 ถึง 1)
• ตัวแปร border-opacity ของ CSS กำหนดค่าลึกลงของสีของบรรทัด (ขอบเขตที่ถูกต้อง: 0 ถึง 1)

ตัวอย่าง 3

กำหนดค่าลึกลงขององค์ประกอบทั้งหมด:

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

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

ลองทดลองด้วยตัวเอง

การอธิบายรหัส

• ตัวแปร opacity ของ CSS กำหนดค่าลึกลงขององค์ประกอบทั้งหมด (ขอบเขตที่ถูกต้อง: 0 ถึง 1)

ตัวอย่าง 4

ตัวอย่างสุดท้าย สร้างสี่เหลี่ยมผืนผ้าที่มีมุมเรียบ:

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

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

ลองทดลองด้วยตัวเอง

การอธิบายรหัส

• rx และ ry ทำให้มุมของสี่เหลี่ยมมีรูปทรงกลม