SVG <rect>

SVG มีองค์ประกอบรูปที่ถูกกำหนดก่อน ที่พัฒนาเพื่อใช้และปฏิบัติโดยผู้พัฒนา。

รูปทรงของ SVG

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

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

บทบาทของแต่ละบทนี้จะเผยแพร่ให้คุณ โดยเริ่มจากองค์ประกอบตาราง

<rect> แทรก

<rect> แทรกสามารถใช้สร้างตาราง และทั้งหมดของตาราง

เพื่อเข้าใจว่ามันทำงานอย่างไร โปรดคัดลอกรหัสนี้และบันทึกเป็นไฟล์ "rect1.svg" จากบันทึกแบบเก็บรหัส

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

การอธิบายรหัสโค้ด:

  • คุณสมบัติ width และ height ของ element rect สามารถกำหนดความสูงและความกว้างของตาราง
  • คุณสมบัติ style ใช้กำหนดคุณสมบัติ CSS
  • คุณสมบัติ fill ของ CSS กำหนดสีที่ใช้เติมของตาราง (ค่า rgb หรือชื่อสีหรือค่าหexadecimal)
  • คุณสมบัติ stroke-width ของ CSS กำหนดความกว้างของขอบของตาราง
  • คุณสมบัติ stroke ของ CSS กำหนดสีของขอบของตาราง

ดูตัวอย่างนี้

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

ตัวอย่างที่ชัดเจน:

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

ดูตัวอย่าง

เพื่อกำหนดความโปร่งใสขององค์ประกอบเดียวกัน

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

การอธิบายรหัสโค้ด:

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

ดูตัวอย่าง

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

การอธิบายรหัสโค้ด:

rx และ ry แอตทริบิวต์ทำให้สี่เหลี่ยมขวางมีมุมรอบ

ดูตัวอย่าง