Μάθετε πώς να περιστρέφετε στο SVG

Λειτουργία περιστρεφόμενου γραφικού Vector Graphics

Η περιστροφή μιας εικόνας θα αλλάξει τη γωνία στην οποία εμφανίζεται αυτή η εικόνα. Για απλά γραφικά, αυτό μπορεί να προσθέσει κάποια ποικιλία και ενδιαφέρον για αυτό που διαφορετικά μπορεί να είναι μια απλή ή βαρετή εικόνα. Όπως συμβαίνει με όλους τους μετασχηματισμούς, η περιστροφή λειτουργεί ως μέρος ενός κινούμενου animation ή για ένα στατικό γραφικό. Η εκμάθηση πώς να χρησιμοποιήσετε περιστροφή στο SVG ή το Scalable Vector Graphics , σας επιτρέπει να ζητήσετε μια ξεχωριστή γωνία στο σχεδιασμό του σχήματος σας. Η λειτουργία περιστροφής SVG λειτουργεί για να γυρίσει την εικόνα προς οποιαδήποτε κατεύθυνση.

Σχετικά με την περιστροφή

Η λειτουργία περιστροφής αφορά τη γωνία του γραφικού. Όταν σχεδιάζετε μια εικόνα SVG , πρόκειται να δημιουργήσετε ένα στατικό μοντέλο που πιθανότατα θα καθίσει σε μια παραδοσιακή γωνία. Για παράδειγμα, ένα τετράγωνο θα έχει δύο πλευρές κατά μήκος του άξονα Χ και δύο κατά μήκος του άξονα Υ. Με την περιστροφή, μπορείτε να πάρετε την ίδια πλατεία και να την μετατρέψετε σε σχηματισμό διαμαντιών.

Με αυτό ακριβώς το αποτέλεσμα, έχετε περάσει από ένα πολύ συνηθισμένο κιβώτιο (το οποίο είναι πολύ κοινό στις ιστοσελίδες) σε ένα διαμάντι, το οποίο δεν είναι καθόλου κοινό και το οποίο δεν έχει προσθέσει κάποια ενδιαφέρουσα οπτική ποικιλία σε ένα σχέδιο. Η περιστροφή είναι επίσης μέρος των δυνατοτήτων κίνησης στο SVG. Ένας κύκλος μπορεί να γυρίσει συνεχώς ενώ εμφανίζεται. Αυτή η κίνηση μπορεί να προσελκύσει την προσοχή των επισκεπτών και να σας βοηθήσει να εστιάσετε την εμπειρία τους σε βασικές περιοχές ή στοιχεία σε ένα σχέδιο.

Περιστρέψτε τα έργα σχετικά με τη θεωρία ότι μια κουκίδα στην εικόνα θα παραμείνει σταθερή. Φανταστείτε ένα κομμάτι χαρτιού προσαρτημένο στο χαρτόνι με ένα πείρο. Η θέση του πείρου είναι το σταθερό σημείο. Εάν γυρίσετε το χαρτί παγιδεύοντας μια άκρη και περιστρέφοντάς το με κίνηση δεξιόστροφα ή αριστερόστροφα, ο πείρος δεν κινείται ποτέ, αλλά το ορθογώνιο αλλάζει γωνίες. Το χαρτί θα περιστραφεί, αλλά το σταθερό σημείο του πείρου παραμένει αμετάβλητο. Αυτό είναι πολύ παρόμοιο με το πώς λειτουργεί η λειτουργία περιστροφής.

Περιστρέψτε τη σύνταξη

Με περιστροφή, ορίζετε τη γωνία της στροφής και τις συντεταγμένες της σταθερής περιοχής.

μετασχηματισμός = "περιστροφή (45,100,100)"

Η γωνία της περιστροφής είναι το πρώτο πράγμα που προσθέτετε. Σε αυτόν τον κώδικα, η γωνία περιστροφής είναι 45 μοίρες. Το κεντρικό σημείο είναι αυτό που θα προσθέσετε στη συνέχεια. Εδώ, αυτό το κεντρικό σημείο βρίσκεται στις συντεταγμένες 100, 100. Εάν δεν εισάγετε συντεταγμένες κεντρικής θέσης, τότε θα είναι προεπιλεγμένες στο 0,0. Στο παρακάτω παράδειγμα, η γωνία θα εξακολουθούσε να είναι 45 μοίρες, αλλά δεδομένου ότι το κεντρικό σημείο δεν έχει καθοριστεί, το default θα είναι 0,0.

μετασχηματισμός = "περιστροφή (45)"

Από προεπιλογή, η γωνία πηγαίνει προς τη δεξιά πλευρά του γραφήματος. Για να περιστρέψετε το σχήμα προς την αντίθετη κατεύθυνση, χρησιμοποιείτε σημάδι μείον για να καταχωρίσετε μια αρνητική τιμή.

μετασχηματισμός = "περιστροφή (-45)"

Μια περιστροφή 45 μοιρών είναι μια τέταρτη στροφή αφού οι γωνίες βασίζονται σε κύκλο 360 μοιρών. Εάν ορίσατε την επανάσταση ως 360, η εικόνα δεν θα αλλάξει γιατί κυριολεκτικά το σπρώχνετε σε έναν πλήρη κύκλο, έτσι ώστε το τελικό αποτέλεσμα να είναι πανομοιότυπο με την εμφάνιση που ξεκινήσατε.