Ένας οδηγός σχεδίασης ιστοσελίδων για τη χρήση του "SVG" Viewbox (HTML)
Το Viewbox είναι ένα χαρακτηριστικό που χρησιμοποιείται συνήθως κατά τη δημιουργία σχημάτων SVG . Εάν σκέφτεστε το έγγραφο ως καμβά, το πλαίσιο προβολής είναι μέρος του καμβά που θέλετε να δει ο θεατής. Παρόλο που η σελίδα μπορεί να καλύπτει όλη την οθόνη του υπολογιστή, ο αριθμός μπορεί να υπάρχει μόνο στο ένα τρίτο του συνόλου.
Το Viewbox σάς επιτρέπει να ενημερώσετε τον αναλυτή για να μεγεθύνετε το τρίτο. Εξαλείφει τον επιπλέον λευκό χώρο. Σκεφτείτε το πλαίσιο προβολής ως μια εικονική προσέγγιση για την περικοπή μιας εικόνας.
Χωρίς αυτό, το γραφικό σας θα εμφανιστεί το ένα τρίτο του πραγματικού μεγέθους του.
Τιμές προβολής
Για να περικόψετε μια εικόνα, πρέπει να δημιουργήσετε σημεία στην εικόνα για να κάνετε τις περικοπές. Το ίδιο ισχύει και όταν χρησιμοποιείτε το χαρακτηριστικό κουτιού προβολής. Οι ρυθμίσεις τιμής για το πλαίσιο προβολής περιλαμβάνουν:
- minx -το αρχικό χ συντεταγμένο
- miny -η αρχή της συντεταγμένης y
- width-width of the viewbox
- ύψος-ύψος του πλαισίου προβολής
Η σύνταξη για τις τιμές του πλαισίου προβολής είναι:
viewBox = "0 0 200 150"
Μην συγχέετε το πλάτος και το ύψος του πλαισίου προβολής με το πλάτος και το ύψος που έχετε ορίσει για το έγγραφο SVG . Όταν δημιουργείτε ένα αρχείο SVG, μία από τις πρώτες τιμές που καθορίζετε είναι το πλάτος και το ύψος εγγράφων. Το έγγραφο είναι καμβάς. Το πλαίσιο προβολής μπορεί να καλύψει ολόκληρο τον καμβά ή μόνο ένα τμήμα του.
Αυτό το πλαίσιο προβολής καλύπτει ολόκληρη τη σελίδα.
Αυτό το πλαίσιο προβολής καλύπτει το ήμισυ της σελίδας που αρχίζει στην επάνω δεξιά γωνία.
Το σχήμα σας έχει επίσης αναθέσεις ύψους και πλάτους.
Πρόκειται για ένα έγγραφο που καλύπτει τα 800 x 400 px με ένα πλαίσιο προβολής που ξεκινάει στην επάνω δεξιά γωνία και επεκτείνει το μισό της σελίδας. Το σχήμα είναι ένα ορθογώνιο που ξεκινά στην επάνω δεξιά γωνία του κουτιού προβολής και μετακινεί 100 px προς τα αριστερά και 50 px προς τα κάτω.
Γιατί να ορίσετε μια προβολή;
Το SVG κάνει πολύ περισσότερα από ένα απλό σχέδιο. Μπορεί να δημιουργήσει ένα σχήμα πάνω από το άλλο για ένα σκιασμένο αποτέλεσμα. Μπορεί να μεταμορφώσει ένα σχήμα έτσι ώστε να κλίνει προς μία κατεύθυνση. Για τα προηγμένα φίλτρα, θα πρέπει να κατανοήσετε και να χρησιμοποιήσετε το χαρακτηριστικό πλαίσιο προβολής.