Подготовим контур машины (carDecor.svg)
Цветная подложка под машину. Например, для красной машины (red.svg).
Красный автомобиль мчится по извивающейся трассе с постоянной скоростью. Использован элемент animateMotion и масштабирование изображения с помощью параметра transform. Сам автомобиль вынесен в отдельный файл и подключен с помощью элемента image.
Красный автомобиль едет по внутреннему кругу с постоянной скоростью. Его лихо обгоняет синий автомобиль и срезает на повороте. Авария неизбежна, подождите немного и она обязательно произойдет… или нет, не произойдет.
Добавим ещё один файл для синей машины, контур останется прежним.
Четыре автомобиля стартуют и едут по прямой. Красный автомобиль едет с постоянной скоростью, синий медленно стартует, но потом разгоняется, зеленый стартует быстро, но в конце тормозит. Желтое авто быстро выкатывается к середине и медленно едет дальше, в конце ускоряется. Демонстрируется работа animateMotion с настройками по умолчанию и специальными настройками keySplines и keyTimes.
Добавляем жёлтую и зелёную машинки.
Красный автомобиль выполняет упражнение «параллельная парковка». Демонстрируются свойства fill="freeze", которое оставляет изображение после анимации на месте и rotate="auto-reverse", которое разворачивает перемещаемый объект на 180 градусов.
Синий автомобиль с включенным ближним светом едет по ночному прямоугольнику. Вместо желанных фильтров использован радиальный градиент с полной прозрачностью на stop-opacity.
Все примеры ранее были на сайте http://y3x.ru, который сейчас не работает.
Вернуться в раздел SVG
