SVG <ellipse>

SVG Ellipse - <ellipse>

<ellipse> Ang elemento ay ginagamit upang gumawa ng ellipso.

Ang ellipso ay malapit sa lupa ng bilog. Ang pagkakaiba nito ay ang x at y radius ng ellipso na hindi magkapareho, habang ang bilog ay may magkaparehong x at y radius:

Halimbawa 1

Ang sumusunod na halimbawa ay gumagawa ng ellipso:

Ito ay SVG code:

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

Subukan Ngayon

Paliwanag ng Code:

  • Ang cx attribute ay nagtutukoy sa x-coordinate ng center ng ellipso
  • Ang cy attribute ay nagtutukoy sa y-coordinate ng center ng ellipso
  • Ang rx attribute ay nagtutukoy sa horizontal radius
  • Ang ry attribute ay nagtutukoy sa vertical radius

Halimbawa 2

Ang sumusunod na halimbawa ay gumagawa ng tatlong ellipso na nakakasama-sama:

Ito ay SVG code:

<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>

Subukan Ngayon

Halimbawa 3

Ang sumusunod na halimbawa ay nagkakasampung dalawang ellipso (isang dilaw at isang puti):

Ito ay SVG code:

<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>

Subukan Ngayon