Najnowsze tutoriale tworzenie stron internetowych
 

SVG <Elipsy>


SVG Elipsa - <elipsy>

<ellipse> Element służy do tworzenia elipsy.

Elipsa jest ściśle związana z okręgu. Różnica polega na tym, że elipsa ma X i ay promień, który różni się od siebie, zaś koło ma równe X i Y promień:


Przykład 1

Poniższy przykład tworzy elipsę:

Niestety, Twoja przeglądarka nie obsługuje pływających SVG.

Oto kod SVG:

Przykład

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

Code explanation:

  • cx atrybut definiuje współrzędna x środka elipsy
  • cy atrybut definiuje współrzędna y środka elipsy
  • rx atrybut definiuje promień poziomego
  • ry atrybut definiuje promień pionowy

Przykład 2

Poniższy przykład tworzy trzy elipsy na szczycie siebie:

Niestety, Twoja przeglądarka nie obsługuje pływających SVG.

Oto kod SVG:

Przykład

<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ższy przykład łączy dwie elipsy (one yellow and one white) :

Niestety, Twoja przeglądarka nie obsługuje pływających SVG.

Oto kod SVG:

Przykład

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