SVG <ellipse>

SVG Elipsa - <ellipse>

<ellipse> Element używany do tworzenia elips.

Elipsa jest ściśle związana z okręgiem. Różnica polega na tym, że promienie x i y elipsy są różne, podczas gdy promienie x i y okręgu są równe:

Przykład 1

Poniżej znajduje się przykład tworzenia elipsy:

To jest kod SVG:

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

Spróbuj sam

Wyjaśnienie kodu:

  • Atrybut cx definiuje współrzędne x środka elipsy
  • Atrybut cy definiuje współrzędne y środka elipsy
  • Atrybut rx definiuje poziomy promień elipsy
  • Atrybut ry definiuje pionową promień elipsy

Przykład 2

Poniżej znajduje się przykład tworzenia trzech elips nachodzących na siebie:

To jest kod 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>

Spróbuj sam

Przykład 3

Poniżej znajduje się kombinacja dwóch elips (jeden żółty, jeden biały):

To jest kod 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>

Spróbuj sam