SVG <rect>

Το SVG έχει μερικά προκαθορισμένα στοιχεία γεωμετρίας που μπορούν να χρησιμοποιηθούν και να χειριστούν από τους προγραμματιστές.

Στοιχεία γεωμετρίας SVG

Το SVG έχει μερικά προκαθορισμένα στοιχεία γεωμετρίας που μπορούν να χρησιμοποιηθούν και να χειριστούν από τους προγραμματιστές:

  • Ορθογώνιο <rect>
  • Κυκλός <circle>
  • Ελλειψίδιο <ellipse>
  • Γραμμή <line>
  • Σταυροδρόμι <polyline>
  • Πολυγώνιο <polygon>
  • Διαδρομή <path>

Οι παρακάτω ενότητες θα σας εξηγήσουν αυτά τα στοιχεία, αρχίζοντας από το στοιχείο ορθογώνιου.

Το στοιχείο <rect>

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

Για να κατανοήσετε πώς λειτουργεί, αντιγράψτε αυτό τον κώδικα στο bloc note και αποθηκεύστε τον ως αρχείο "rect1.svg". Τοποθετήστε το αρχείο αυτό στον κατάλογο web:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

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

  • Τα χαρακτηριστικά width και height του στοιχείου rect ορίζουν το ύψος και το πλάτος του ορθογώνιου
  • Η ιδιότητα style χρησιμοποιείται για να ορίσει τις ιδιότητες του CSS
  • Η ιδιότητα fill του CSS ορίζει το χρώμα της γεωμετρίας (τις τιμές rgb, το όνομα χρώματος ή το δεκαδικό αριθμητικό)
  • Η ιδιότητα stroke-width του CSS ορίζει το πλάτος του περιγράμματος του ορθογώνιου
  • Η ιδιότητα stroke του CSS ορίζει το χρώμα του περιγράμματος του ορθογώνιου

Δείτε αυτό το παράδειγμα

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

Παράδειγμα εξήγησης:

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

Εμφάνιση παραδείγματος

η ορισμός της αδιαφάνειας για ολόκληρο το στοιχείο:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

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

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

Εμφάνιση παραδείγματος

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

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

Οι παραμέτρους rx και ry επιτρέπουν στα ορθογώνια να δημιουργούν γωνίες καμπύλης.

Εμφάνιση παραδείγματος