SVG สี่เหลี่ยมผืนผ้า

SVG รูปร่าง

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

• สี่เหลี่ยมผืนผ้า <RECT>
• รอบ <วงกลม>
• รูปไข่ <วงรี>
• สาย <สาย>
• เส้น <เส้น>
• รูปหลายเหลี่ยม <รูปหลายเหลี่ยม>
• เส้นทาง <path>

ส่วนต่อไปนี้จะอธิบายให้คุณองค์ประกอบเหล่านี้เริ่มต้นจากองค์ประกอบที่เป็นรูปสี่เหลี่ยมผืนผ้า

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

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

<Rect> tag ใช้ในการสร้างรูปสี่เหลี่ยมผืนผ้าและตัวแปรสี่เหลี่ยม:

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

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)

การวิเคราะห์รหัสสินค้า:

• กว้างและความสูงแอตทริบิวต์องค์ประกอบ RECT กำหนดความสูงและความกว้างของสี่เหลี่ยมผืนผ้า
• โรงแรมสไตล์ถูกนำมาใช้ในการกำหนดคุณสมบัติ CSS
• สถานที่ให้บริการเติม CSS กำหนดสี่เหลี่ยมเติมสี (ค่า RGB ชื่อสีหรือค่าฐานสิบหก)
• ความกว้างของสถานที่ให้บริการโรคหลอดเลือดสมองที่มีความกว้าง CSS กำหนดเส้นขอบสี่เหลี่ยม
• สถานที่ให้บริการสีจังหวะ CSS กำหนดเส้นขอบสี่เหลี่ยม

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

ลองดูตัวอย่างอื่นก็มีจำนวนของคุณสมบัติใหม่:

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

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)

การวิเคราะห์รหัสสินค้า:

• X แอตทริบิวต์กำหนดตำแหน่งด้านซ้ายของรูปสี่เหลี่ยมผืนผ้า (ตัวอย่างเช่น x = "0" เพื่อกำหนดรูปสี่เหลี่ยมผืนผ้าไปทางด้านซ้ายของหน้าต่างเบราว์เซอร์, ระยะทางที่เป็น 0px)
• ด้านบนตำแหน่ง Y แอตทริบิวต์กำหนดสี่เหลี่ยมผืนผ้า (ตัวอย่างเช่นการ y = "0" จากความหมายของรูปสี่เหลี่ยมผืนผ้าที่ด้านบนของหน้าต่างเบราว์เซอร์ที่เป็น 0px)
• สถานที่ให้บริการเติมความทึบของ CSS กำหนดความโปร่งใสของการเติมสีที่ (ช่วงทางกฎหมาย: 0--1)
• คุณสมบัติ CSS จังหวะทึบกำหนดความโปร่งใสของสีจังหวะที่ (ช่วงทางกฎหมาย: 0--1)

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

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

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

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)

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

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

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

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

สำหรับผู้ใช้ Opera: ไฟล์ SVG มุมมอง (คลิกขวาบนกราฟิกแหล่งที่มาแสดงตัวอย่าง SVG)

• คุณลักษณะและ RX Ry สามารถสร้างสี่เหลี่ยมโค้งมน