SVG <rect>

ΣVΓ Μορφές

Η SVΓ έχει ορισμένα προκαθορισμένα στοιχεία μορφής που είναι διαθέσιμα για τους προγραμματιστές:

• Ορθογώνιο <rect>
• Κύκλος <circle>
• Οβάλ <ellipse>
• Γραμμή <line>
• Καμπύλη <polyline>
• Πολυγώνιο <polygon>
• Διαδρομή <path>

Οι επόμενες ενότητες θα ξεκινήσουν από το στοιχείο rect και θα εξηγήσουν κάθε στοιχείο.

ΣVΓ Ορθογώνιο - <rect>

Παράδειγμα 1

<rect> Το στοιχείο χρησιμοποιείται για τη δημιουργία ορθογώνιων και παραλλαγών σχημάτων ορθογώνιων:

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

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Try It Yourself

Code Explanation:

• Οι ιδιότητες width και height του στοιχείου <rect> ορίζουν το πλάτος και το ύψος του ορθογώνιου
• Η ιδιότητα style χρησιμοποιείται για να ορίσει τις ιδιότητες CSS του ορθογώνιου
• Η ιδιότητα fill του CSS ορίζει το χρώμα της γεωμετρίας του ορθογώνιου
• Η ιδιότητα border-width του CSS ορίζει το πλάτος του περιγράμματος του ορθογώνιου
• Η ιδιότητα stroke του CSS ορίζει το χρώμα του περιγράμματος του ορθογώνιου

Παράδειγμα 2

Ας δούμε έναν άλλο παράδειγμα που περιλαμβάνει νέες ιδιότητες:

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

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

Try It Yourself

Code Explanation:

• Η ιδιότητα x ορίζει τη θέση του αριστερού άκρου του ορθογώνιου (π.χ. x="50" τοποθετεί το ορθογώνιο σε απόσταση 50 px από το αριστερό περιθώριο)
• Η ιδιότητα y ορίζει τη θέση της κορυφής του ορθογώνιου (π.χ. y="20" τοποθετεί το ορθογώνιο σε απόσταση 20 px από το πάνω περιθώριο)
• Η ιδιότητα fill-opacity του CSS ορίζει την αδιαφάνεια του χρώματος της γεωμετρίας (νόμιμη περιοχή: 0 έως 1)
• Η ιδιότητα border-opacity του CSS ορίζει την αδιαφάνεια του χρώματος της γραμμής (νόμιμη περιοχή: 0 έως 1)

Παράδειγμα 3

Ορίζει την αδιαφάνεια του ολόκληρου του στοιχείου:

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

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

Try It Yourself

Code Explanation:

• Η ιδιότητα opacity του CSS ορίζει την αδιαφάνεια του ολόκληρου του στοιχείου (νόμιμη περιοχή: 0 έως 1)

Παράδειγμα 4

Τελευταίος παράδειγμα, δημιουργία ορθογώνιου με γωνίες στρογγυλεμένες:

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

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Try It Yourself

Code Explanation:

• The rx and ry properties make the corners of the rectangle rounded