SVG <ellipse>

Ελλειψοειδής SVG - <ellipse>

<ellipse> Το στοιχείο χρησιμοποιείται για τη δημιουργία ελλειψοειδών.

Η ελλειψοειδής είναι στενά συνδεδεμένη με τον κύκλο. Η διαφορά είναι ότι η ελλειψοειδής έχει διαφορετικές ακτίνες x και y, ενώ ο κύκλος έχει ίσες ακτίνες x και y:

Παράδειγμα 1

Ο παρακάτω κώδικας δημιουργεί μια ελλειψοειδές:

Αυτό είναι κώδικας SVG:

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

Δοκιμάστε το Εγκεφαλικά

Ανάλυση κώδικα:

• Η ιδιότητα cx ορίζει την x-κεντρική συντεταγμένη του ελλειψοειδούς
• Η ιδιότητα cy ορίζει την y-κεντρική συντεταγμένη του ελλειψοειδούς
• Η ιδιότητα rx ορίζει τον οριζόντιο ακτίνα
• Η ιδιότητα ry ορίζει τον κατακόρυφο ακτίνα

Παράδειγμα 2

Ο παρακάτω παράδειγμα δημιουργεί τρεις ελλειψοειδείς που καλύπτουν η μία την άλλη:

Αυτό είναι κώδικας 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>

Δοκιμάστε το Εγκεφαλικά

Παράδειγμα 3

Ο παρακάτω παράδειγμα συνδυάζει δύο ελλειψοειδείς (ένα κίτρινο και ένα λευκό):

Αυτό είναι κώδικας 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>

Δοκιμάστε το Εγκεφαλικά