Εργασία με κείμενο σε κλιμακωτά διανυσματικά γραφικά (SVG)

Στις προηγούμενες δημοσιεύσεις μας, χρησιμοποιήσαμε το SVG για να δημιουργήσουμε σχήματα. Σε αυτή τη θέση, όπως είπε ο τίτλος, θα εξετάσουμε δημιουργία κειμένου με SVG. Υπάρχουν πολλά πράγματα που μπορούμε να κάνουμε με κείμενο πέρα ​​από το τι απλό κείμενο HTML είναι σε θέση να κάνει.

Έτσι, ας τα ελέγξουμε.

Βασική εφαρμογή

Αλλά, πριν προχωρήσουμε περισσότερο, ας δούμε πώς Κείμενο σε SVG διαμορφώνεται στο πολύ βασικό της επίπεδο:

Το κείμενο στο SVG, όπως μπορείτε να δείτε από το παραπάνω απόσπασμα κώδικα, ορίζεται με μια αρκετά λογική ετικέτα, . Αυτό το στοιχείο ουσιαστικά απαιτεί μόνο Χ και y χαρακτηριστικά για να καθορίσετε τις συντεταγμένες της γραμμής βάσης.

Πηγή εικόνας: Wikipedia.org

Και εδώ θα μοιάσει το κείμενο. Προς το παρόν φαίνεται ότι δεν έχει καμία διαφορά με το κανονικό κείμενο σε HTML.

Βασικές μορφές κειμένου

Το κείμενο μπορεί επίσης να σχεδιαστεί με ιδιότητες CSS, όπως π.χ. γραμματοσειράς-βάρους, στυλ γραμματοσειράς, και διακόσμηση κειμένου που μπορούν να υλοποιηθούν είτε μέσω inline style, εσωτερικό στυλ ή εξωτερικό στυλ όπως συζητήσαμε στην προηγούμενη δημοσίευση Στυλ SVG με CSS. Ακολουθούν ορισμένα παραδείγματα.

Τολμηρός

 Αυτό είναι κείμενο στο Scalable Vector Graphic (SVG) 

Πλαίσιο

 Αυτό είναι κείμενο με πλάγια γραφή στο Scalable Vector Graphic (SVG) 

Υπογραμμίζω

 Αυτό είναι υπογραμμισμένο κείμενο στο Scalable Vector Graphic (SVG) 

Στοιχείο

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

 Αυτό είναι τολμηρό, αυτό είναι πλάγια και αυτό είναι υπογραμμισμένο 

Λειτουργία γραφής

Το κείμενο δεν είναι μόνο γραμμένο από από αριστερά προς τα δεξιά. Σε άλλα μέρη του κόσμου, για παράδειγμα στην Ιαπωνία, γράφεται το κείμενο από πάνω προς τα κάτω. Στο SVG, αυτό μπορεί να γίνει χρησιμοποιώντας το γραφής Χαρακτηριστικό.

 ぁ ぃ ぅ ぇ ぉ か き  

Στο παραπάνω παράδειγμα, έχουμε βάλει αρκετούς τυχαίους ιαπωνικούς χαρακτήρες (μην με ρωτάς το νόημά τους, πραγματικά δεν έχω ιδέα) και να αλλάξω τον προσανατολισμό με αυτή τη δήλωση στυλ, λειτουργία εγγραφής: tb, όπου tb είναι στάσιμη από πάνω προς τα κάτω.

Περίγραμμα κειμένου

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

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

Διαδρομή κειμένου

Στο SVG, το κείμενο δεν είναι μόνο σε θέση να εμφανίζεται οριζόντια και κάθετα, αλλά μπορεί επίσης ακολουθήστε ένα μοτίβο διαδρομής. Εδώ είναι πώς να το κάνουμε.

Πρώτον, πρέπει να καθορίσουμε η διαδρομή. Ωστόσο, η δημιουργία μιας διαδρομής απευθείας σε HTML δεν είναι τόσο διαισθητική, πρέπει να κατανοήσουμε τις συντεταγμένες και ορισμένες εντολές που είμαι βέβαιος ότι οι περισσότεροι από εμάς θα προσπαθήσουν να αποφύγουν. Έτσι, για να γίνει αυτό το βήμα πιο απλό, προτείνω προσωπικά να ανοίξω έναν επεξεργαστή διανυσμάτων (Inkscape ή Illustrator), να δημιουργήσω μια διαδρομή και να δημιουργήσω τον κώδικα SVG.

Στη συνέχεια, βάλτε το στοιχείο μέσα σε ένα στοιχείο. defs εδώ σημαίνει ορισμός.

Παρατηρήστε ότι προσθέσαμε επίσης ένα ταυτότητα αποδίδουν στο . Τώρα, πρέπει να συνδέσουμε μόνο το μονοπάτι ταυτότητα στο κείμενο μας με στοιχείο, όπως έτσι?

    Ο χρόνος παραμονής είναι σταθερός.   

Περαιτέρω ανάγνωση: Διαδρομές SVG

Κλίση κειμένου

Η προσθήκη ενός φόντου για την πλήρωση του κειμένου είναι επίσης δυνατή στο SVG και αν έχετε πετύχει στην ενότητα "Διαδρομή κειμένου" παραπάνω, αυτό θα ήταν πολύ πιο εύκολο.

Πρώτον, πρέπει να ορίσουμε τα χρώματα κλίσης.

Όταν οριστούν όλοι οι απαραίτητοι ορισμοί, τώρα χρειάζεται μόνο να προσθέσουμε το κείμενο και να αναφερθούμε γέμισμα αποδίδουν τα χαρακτηριστικά της κλίσης ταυτότητα χαρακτηριστικό, ως εξής:

 Βαθμίδα 

Και εδώ είναι, το κείμενο με κλίση.

Περαιτέρω ανάγνωση: SVG κλίση και μοτίβο

Περαιτέρω αναφορές

Το κείμενο στο SVG είναι αναμφισβήτητα ισχυρό, υπάρχουν πραγματικά πολλά πράγματα που μπορούμε να κάνουμε πέρα ​​από αυτά που μπορούμε να φιλοξενήσουμε σε αυτή τη θέση. Λοιπόν, παρακάτω έχουμε συγκεντρώσει μερικές ακόμη αναφορές για να εξυπηρετήσουμε το ενδιαφέρον σας για αυτό το θέμα.

• Σχετικά με τις γραμματοσειρές στο SVG - Divya Manian
• Κείμενο επίσημης τεκμηρίωσης SVG - W3.org
• Ενημέρωση SVG στο Mozilla Dev. Δίκτυο με παραδείγματα και εργαλεία - MDN
• Λειτουργία γραφής SVG - MDN

• Προβολή επίδειξης
• Λήψη πηγής