SVG <ellipse>
- Nakaraang Pahina Circle ng SVG
- Susunod na Pahina Line ng SVG
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>
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>
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>
- Nakaraang Pahina Circle ng SVG
- Susunod na Pahina Line ng SVG