22: Tạo hoạt ảnh SVG bằng CSS - Thủ thuật CSS

Khi bạn sử dụng SVG nội tuyến, tất cả mã SVG đó đều nằm ngay trong HTML và do đó trong DOM. Bạn có thể tạo kiểu cho chúng giống như cách bạn làm ,

hoặc bất kỳ phần tử HTML nào khác. Tạo kiểu CSS mang lại khả năng hoạt ảnh và chuyển tiếp.
Một ví dụ đơn giản:

Xem Biểu trưng Pen CodePen dưới dạng Inline SVG của Chris Coyier (@chriscoyier) trên CodePen.

A đã viết cách giải quyết một thiết kế phức tạp hơn một chút trong hướng dẫn này. Đây là bản demo đó.

Xem Quảng cáo Pen Wufoo SVG của Chris Coyier (@chriscoyier) trên CodePen.

Trong video màn hình này, chúng tôi thực hiện một quảng cáo SVG hoạt hình khác cho Wufoo, bắt đầu gần như từ đầu. Thiết kế có một số đám mây trong đó mà chúng tôi tạo hoạt ảnh để di chuyển và lặp lại một cách trơn tru và liên tục.

Lúc đầu, chúng tôi sử dụng SVG nội tuyến và làm động nó bằng CSS chỉ được đính kèm vào cùng một tài liệu HTML. Nhưng sau đó, chỉ để giới thiệu cách hoạt động, chúng tôi đã chuyển CSS đó vào bên trong SVG, điều này hoàn toàn hợp lệ. Lý do mà bạn có thể muốn làm điều đó là vì sau đó hoạt ảnh có thể chạy ngay cả khi bạn sử dụng SVG dưới dạng hoặc `background-image`.

Bản giới thiệu:

Xem Pen kKdDj của Chris Coyier (@chriscoyier) trên CodePen.

Hỗ trợ của trình duyệt cho hoạt ảnh đó sẽ khác nhau. Tại thời điểm viết bài này, nó chỉ hoạt động trong Chrome.