Γραφικά διανυσματικών γραφικών (SVG) με CSS

Σήμερα θα συνεχίσουμε τη συζήτησή μας για το Scalable Vector Graphic (SVG) και όπως έχουμε επισημάνει στην προηγούμενη θέση μας, ένα από τα πλεονεκτήματα της χρήσης του SVG είναι ότι μπορεί να σχεδιαστεί με CSS.

Ιδιότητες Styling SVG

Το στυλ SVG βασικά λειτουργεί με τον ίδιο τρόπο όπως σε κανονικά στοιχεία HTML, μοιράζοντας κάποιες κοινές ιδιότητες. Ωστόσο, υπάρχουν και άλλες ιδιότητες που προορίζονται ειδικά για το αντικείμενο SVG που έχουν τις δικές τους προδιαγραφές εκτός από το CSS.

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

Εάν έχετε δουλέψει με τον επεξεργαστή φορέων όπως το Adobe Illustrator αρκετά καιρό, μπορείτε γρήγορα να μαντέψετε ότι ο μηχανισμός ονομασίας ιδιοτήτων στο SVG προέρχεται από τον επεξεργαστή.

Εφαρμογή στυλ SVG

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

Χαρακτηριστικά παρουσίασης

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

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

Inline Style Sheet

Μπορούμε επίσης να προσθέσουμε στυλ με το στυλ Χαρακτηριστικό. Στο παρακάτω παράδειγμα θα προσθέσουμε επίσης γέμισμα και κτύπημα στο rect, αλλά αυτή τη φορά το προσθέτουμε μέσα στο στυλ και περιστρέψτε το με το CSS3 μεταμορφώνω ιδιοκτησία, όπως έτσι?.

Το ορθογώνιο θα έχει το ίδιο αποτέλεσμα, μόνο ότι τώρα περιστρέφεται επίσης.

Εσωτερικό φύλλο στυλ

Ενσωματώστε το στυλ SVG μέσα στο στυλ στοιχείο είναι επίσης δυνατό και δεν διαφέρει από το πώς το κάναμε σε κανονικό κώδικα HTML. Αυτό το παρακάτω παράδειγμα δείχνει τον τρόπο με τον οποίο προσθέτουμε εσωτερικά στυλ για να επηρεάσουμε τα στοιχεία SVG στο .html έγγραφο.

Ωστόσο, το SVG είναι μια γλώσσα που βασίζεται σε XML, οπότε όταν πρόκειται να προσθέσουμε inline φύλλο στυλ σε a .svg έγγραφο, πρέπει να θέσουμε τη δήλωση στυλ μέσα cdata, ως εξής;

ο cdata εδώ απαιτείται, αφού το CSS μπορεί να έχει > χαρακτήρα που θα έρθει σε σύγκρουση με τους παραμέτρους XML. Χρησιμοποιώντας cdata συνιστάται ιδιαίτερα για την ενσωμάτωση στυλ στο SVG, ακόμα και αν ο χαρακτήρας που είναι αντικρουόμενος δεν δίνεται στο φύλλο στυλ.

Εξωτερικό φύλλο στυλ

Το εξωτερικό φύλλο στυλ λειτουργεί επίσης με τον ίδιο τρόπο για τα στοιχεία SVG στο .html έγγραφο.

Και πάλι στο .svg έγγραφο, πρέπει να παραπέμψουμε το εξωτερικό φύλλο στυλ ως ένα xml-stylesheet, όπως έτσι.

Ομαδοποίηση στοιχείων

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

Τόσο το ορθογώνιο όσο και ο κύκλος θα έχουν το ίδιο αποτέλεσμα.

Τελική σκέψη

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

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