SVG <polygon>

SVG Πολυγώνων - <polygon>

<polygon> Το στοιχείο χρησιμοποιείται για τη δημιουργία γραφικών που περιέχουν τουλάχιστον τρία γωνία.

Το πολύγωνο αποτελείται από ευθείες γραμμές και έχει σχήμα "κλειστό" (όλες οι γραμμές συνδέονται μεταξύ τους).

Το όνομα Polygon προέρχεται από την ελληνική γλώσσα. Το "Poly" σημαίνει "πολλά", το "gon" σημαίνει "γωνία".

Παράδειγμα 1

Ακολουθεί ένα παράδειγμα που δημιουργεί πολύγωνο με τρία πλευρά:

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

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Δοκιμάστε το Διαδικτυακά

Διήγησις Κώδικα:

  • Η ιδιότητα points καθορίζει τις συντεταγμένες x και y κάθε γωνίας του πολύγωνου

Παράδειγμα 2

Ακολουθεί ένα παράδειγμα που δημιουργεί τετράγωνο με τέσσερα πλευρά:

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

<svg height="250" width="500">
 <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Δοκιμάστε το Διαδικτυακά

Παράδειγμα 3

Χρήση <polygon> Δημιουργία ενός αστέριου στοιχείου:

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

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Δοκιμάστε το Διαδικτυακά

Παράδειγμα 4

更改 fill-rule ιδιότητα σε "evenodd"：

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

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Δοκιμάστε το Διαδικτυακά