SVG <RECT>

SVG รูปร่าง

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

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

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

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

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

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

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

Code explanation:

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

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

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

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

Code explanation:

• x แอตทริบิวต์กำหนดตำแหน่งด้านซ้ายของรูปสี่เหลี่ยมผืนผ้า (เช่น x = "50" สถานที่สี่เหลี่ยม 50 px จากขอบด้านซ้าย)
• y แอตทริบิวต์กำหนดตำแหน่งบนสุดของรูปสี่เหลี่ยมผืนผ้า (เช่น Y = "20" สถานที่สี่เหลี่ยม 20 px จากขอบด้านบน)
• คุณสมบัติ CSS เติมความทึบกำหนดความทึบของสีเติมที่ (legal range: 0 to 1)
• คุณสมบัติ CSS จังหวะทึบกำหนดความทึบของสีจังหวะที่ (legal range: 0 to 1)

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

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

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

Code explanation:

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

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

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

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

Code explanation:

• สินค้า RX และ ry คุณลักษณะรอบมุมของสี่เหลี่ยมผืนผ้า