SVG <elipsa>
SVG Elipsa - <ellipsa>
Element <ellipse> służy do tworzenia elipsy.
Elipsa jest ściśle związana z okręgiem. Różnica polega na tym, że elipsa ma promienie x i a, które różnią się od siebie, podczas gdy okrąg ma promień równy x i y:
Przykład 1
Poniższy przykład tworzy elipsę:
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>
Wyjaśnienie kodu:
- Atrybut cx określa współrzędną x środka elipsy
- Atrybut cy określa współrzędną y środka elipsy
- Atrybut rx określa promień poziomy
- Atrybut ry określa promień pionowy
Przykład 2
Poniższy przykład tworzy trzy elipsy jedna na drugiej:
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>
Przykład 3
Poniższy przykład łączy dwie elipsy (jedna żółta i jedna biała):
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>