SVG <ellipse>

SVG-ellipsi - <ellipse>

<ellipse> Elementti luo ellipsin.

Ellipsi on läheisesti liitetty pyörteeseen. Ero on siinä, että ellipsin x- ja y-sädet ovat eri, kun taas pyörteellä x- ja y-sädet ovat yhtä suuria:

Esimerkki 1

Tässä esimerkissä luodaan ellipsi:

Tämä on SVG-koodi:

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

Kokeile itse

Koodin selitys:

• cx-ominaisuus määrittää ellipsin keskipisteen x-koordinaatti
• cy-ominaisuus määrittää ellipsin keskipisteen y-koordinaatti
• rx-ominaisuus määrittää vaakasuuntainen säde
• ry-ominaisuus määrittää pystysuuntainen säde

Esimerkki 2

Tässä esimerkissä luodaan kolme toisiaan peittävää ellipsiä:

Tämä on SVG-koodi:

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

Kokeile itse

Esimerkki 3

Esimerkki yhdistää kaksi ellipsiä (yksi keltainen ja yksi valkoinen):

Tämä on SVG-koodi:

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

Kokeile itse