22: Menghidupkan SVG dengan CSS - Trik CSS

Apabila anda menggunakan SVG sebaris, semua kod SVG itu betul dalam HTML, dan dengan demikian di DOM. Anda boleh menggayakannya seperti yang anda mahukan ,

, atau elemen HTML yang lain. Gaya CSS membawa kemungkinan animasi dan peralihan.

Contoh mudah:

Lihat Logo Pen CodePen sebagai Inline SVG oleh Chris Coyier (@chriscoyier) di CodePen.

A menulis bagaimana menangani reka bentuk yang sedikit lebih kompleks dalam tutorial ini. Inilah demo itu.

Lihat Iklan Pen Wufoo SVG oleh Chris Coyier (@chriscoyier) di CodePen.

Dalam screencast ini kami membuat iklan SVG animasi lain untuk Wufoo, bermula hampir dari awal. Reka bentuknya mempunyai beberapa awan di mana kita bernyawa untuk bergerak dan mengulang dengan lancar dan tanpa henti.

Pada mulanya, kami menggunakan SVG sebaris dan menghidupkannya dengan CSS yang hanya dilampirkan pada dokumen HTML yang sama. Tetapi kemudian, untuk menunjukkan cara kerjanya, kami memindahkan CSS itu ke dalam SVG itu sendiri, yang benar-benar berlaku. Sebab anda mungkin mahu melakukannya adalah kerana animasi dapat berjalan walaupun anda menggunakan SVG sebagai atau background-image.

Demo:

Lihat Pen KKdDj oleh Chris Coyier (@chriscoyier) di CodePen.

Sokongan penyemak imbas untuk animasi itu akan berbeza-beza. Pada masa penulisan ini, ia hanya berfungsi di Chrome.

Fail

• 22-iklan-1.svg