Когато използвате вграден SVG, целият този SVG код е точно в HTML и по този начин в DOM. Можете да ги оформите точно както бихте направили
,
или друг HTML елемент. CSS стилът носи възможността за анимации и преходи.
Един прост пример:
Вижте логото на Pen CodePen като Inline SVG от Chris Coyier (@chriscoyier) на CodePen.
A написа как да се справим с малко по-сложен дизайн в този урок. Ето тази демонстрация.
Вижте рекламата на Pen Wufoo SVG от Chris Coyier (@chriscoyier) на CodePen.
В този скрийнкаст правим поредната анимирана SVG реклама за Wufoo, започвайки почти от нулата. Дизайнът има някои облаци в себе си, които ние анимираме, за да се движим и повтаряме плавно и безкрайно.
Първоначално използвахме вграден SVG и го анимирахме с CSS, просто прикрепен към същия HTML документ. Но тогава, само за да покажем как работи, преместихме този CSS в самия SVG, което е напълно валидно. Причината, поради която може да искате да направите това, е, че тогава анимацията може да се изпълнява дори когато използвате SVG като
или background-image
.
Демонстрация:
Вижте Pen kKdDj от Chris Coyier (@chriscoyier) на CodePen.
Поддръжката на браузъра за тази анимация ще варира. По времето на това писане той работеше само в Chrome.
Файлове
- 22-ad-1.svg