SVG <ellipse>

SVG วงกลม - <ellipse>

<ellipse> ตัวแบบนี้ใช้สร้างวงกลม

วงกลมมีความเกี่ยวข้องกับวงกลมมาก ต่างกันเพียงที่วงกลมมีความยาวและความกว้างของ x และ y ต่างกัน ในขณะที่วงกลมมีความยาวและความกว้างของ x และ y เท่ากัน:

ตัวอย่าง 1

ตัวอย่างดังนี้สร้างวงกลม:

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

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

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

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

• ค่า cx นิยามโดยตำแหน่ง x ของจุดกลางวงกลม
• ค่า cy นิยามโดยตำแหน่ง y ของจุดกลางวงกลม
• ความกว้างของวงกลมระยะนี้นิยามโดยรายละเอียด rx
• ความยาวของวงกลมระยะนี้นิยามโดยรายละเอียด ry

ตัวอย่าง 2

ตัวอย่างดังนี้สร้างวงกลมสามตัวที่ชนกัน:

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

<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

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

ตัวอย่าง 3

ตัวอย่างดังนี้ประกอบด้วยวงกลมสองตัว (หนึ่งสีเหลืองและหนึ่งสีขาว):

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

<svg height="100" width="500">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>

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