Μπορούμε να ρέει το κείμενο κατά μήκος μιας καμπύλης γραμμής με τρία εργαλεία χτισμένο ακριβώς σε SVG: , και .
Το απόσπασμα
Dangerous Curves Ahead Πώς φτάσαμε εκεί
Φανταστείτε να σχεδιάζουμε μια καμπύλη γραμμή στο SVG και να του δώσουμε ένα αναγνωριστικό που ονομάζεται curve.
Δείτε το Pen NgwPYB από τον Geoff Graham (@geoffgraham) στο CodePen.
Στη συνέχεια, ρίχνουμε περιεχόμενο στο SVG χρησιμοποιώντας την ετικέτα και του δίνουμε ένα πλάτος που ταιριάζει με τις viewBoxδιαστάσεις SVG . Δεν πρόκειται να δούμε τίποτα ακόμη, αλλά ξέρουμε ότι το κείμενο υπάρχει εκτός οθόνης κάπου.
Δείτε το Pen ZyaYOw του Geoff Graham (@geoffgraham) στο CodePen.
Θέλουμε πραγματικά να δούμε αυτό το κείμενο. Μπορούμε να τυλίξουμε το κείμενό μας στην ετικέτα και να το ρυθμίσουμε ώστε να ακολουθεί τις γραμμές της καμπύλης διαδρομής καλώντας το αναγνωριστικό διαδρομής που ορίσαμε νωρίτερα.
Δείτε το Pen Kqywpe του Geoff Graham (@geoffgraham) στο CodePen.
Τώρα μαγειρεύουμε με αέριο!
Δεν θέλουμε να δούμε αυτήν την καμπύλη, οπότε ας δώσουμε στο μονοπάτι μια διαφανή γέμιση. Θα μπορούσαμε επίσης να το κάνουμε αυτό στο CSS, αλλά το εφαρμόζουμε απευθείας στην σήμανση SVG για χάρη αυτού του παραδείγματος.
Δείτε το Pen xrPbgx του Geoff Graham (@geoffgraham) στο CodePen.
Τα υπόλοιπα είναι CSS! Το ακριβές μέγεθος γραμματοσειράς θα εξαρτηθεί από το ίδιο το κείμενο και από ποια οικογένεια γραμματοσειρών χρησιμοποιείται, αλλά, μόλις επιτύχετε τη σωστή ισορροπία, το ίδιο το SVG θα χειριστεί την απόκριση και θα διασφαλίσει ότι όλα παραμένουν στην καμπύλη σε οποιαδήποτε κλίμακα.
Δείτε το κείμενο Pen SVG Along a Curved Path από τον Geoff Graham (@geoffgraham) στο CodePen.
Θα μπορούσαμε να εφαρμόσουμε την ίδια μέθοδο σε κάθε τύπο καμπύλης διαδρομής.
Δείτε το κείμενο Pen SVG Along a Curved Path από τον Geoff Graham (@geoffgraham) στο CodePen.