SVG <rect>

รูปร่าง SVG

SVG มีองค์ประกอบรูปร่างที่กำหนดไว้ล่วงหน้าบางส่วนที่นักพัฒนาสามารถใช้ได้:

• สี่เหลี่ยมผืนผ้า <rect>
• วงกลม <วงกลม>
• วงรี <วงรี>
• ไลน์ <line>
• Polyline <polyline>
• รูปหลายเหลี่ยม <รูปหลายเหลี่ยม>
• เส้นทาง <เส้นทาง>

บทต่อไปนี้จะอธิบายแต่ละองค์ประกอบ โดยเริ่มจากองค์ประกอบตรง

SVG สี่เหลี่ยมผืนผ้า - <rect>

ตัวอย่าง 1

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

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

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

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

ตัวอย่าง 2

มาดูตัวอย่างอื่นที่มีคุณลักษณะใหม่:

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

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

• แอตทริบิวต์ x กำหนดตำแหน่งด้านซ้ายของสี่เหลี่ยมผืนผ้า (เช่น x="50" วางสี่เหลี่ยมผืนผ้า 50 พิกเซลจากระยะขอบด้านซ้าย)
• แอตทริบิวต์ y กำหนดตำแหน่งด้านบนของสี่เหลี่ยมผืนผ้า (เช่น y="20" วางสี่เหลี่ยมผืนผ้า 20 พิกเซลจากระยะขอบด้านบน)
• คุณสมบัติ CSS fill-opacity กำหนดความทึบของสีเติม (ช่วงทางกฎหมาย: 0 ถึง 1)
• คุณสมบัติ CSS stroke-opacity กำหนดความทึบของสีเส้นโครงร่าง (ช่วงทางกฎหมาย: 0 ถึง 1)

ตัวอย่างที่ 3

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

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

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

• คุณสมบัติความทึบ CSS กำหนดค่าความทึบสำหรับองค์ประกอบทั้งหมด (ช่วงทางกฎหมาย: 0 ถึง 1)

ตัวอย่างที่ 4

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

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

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

• แอตทริบิวต์ rx และ ry ปัดเศษมุมของสี่เหลี่ยมผืนผ้า