Όταν χρησιμοποιείτε ενσωματωμένο SVG, όλος αυτός ο κωδικός SVG είναι σωστός στο HTML, και επομένως στο DOM. Μπορείτε να τα διαμορφώσετε όπως θα κάνατε ,
ή οποιοδήποτε άλλο στοιχείο HTML. Το στυλ CSS προσφέρει τη δυνατότητα κινούμενων εικόνων και μεταβάσεων.
Ένα απλό παράδειγμα:
Δείτε το λογότυπο Pen CodePen ως Inline SVG από τον Chris Coyier (@chriscoyier) στο CodePen.
Ένας έγραψε πώς να αντιμετωπίσει μια ελαφρώς πιο περίπλοκη σχεδίαση σε αυτό το σεμινάριο. Εδώ είναι αυτό το demo.
Δείτε τη διαφήμιση Pen Wufoo SVG του Chris Coyier (@chriscoyier) στο CodePen.
Σε αυτό το screencast κάνουμε μια άλλη κινούμενη διαφήμιση SVG για το Wufoo, ξεκινώντας σχεδόν από το μηδέν. Ο σχεδιασμός έχει μερικά σύννεφα σε αυτό που εμψυχόμαστε για να μετακινηθούμε και να επαναλάβουμε ομαλά και ατελείωτα.
Αρχικά, χρησιμοποιήσαμε το ενσωματωμένο SVG και το κινούσαμε με CSS που επισυνάπτεται στο ίδιο έγγραφο HTML. Αλλά μετά, για να δείξουμε πώς λειτουργεί, μετακινήσαμε αυτό το CSS στο ίδιο το SVG, το οποίο είναι απολύτως έγκυρο. Ο λόγος που ίσως θέλετε να το κάνετε είναι επειδή τότε το κινούμενο σχέδιο μπορεί να εκτελεστεί ακόμα και όταν χρησιμοποιείτε το SVG ως background-image.
Διαδήλωση:
Δείτε το στυλό kKdDj του Chris Coyier (@chriscoyier) στο CodePen.
Η υποστήριξη του προγράμματος περιήγησης για αυτό το κινούμενο σχέδιο θα διαφέρει. Τη στιγμή αυτής της γραφής, λειτουργούσε μόνο στο Chrome.
Αρχεία
- 22-ad-1.svg