Движение поезда с помощью SVG

#html #css #css3 #svg #анимация

У меня есть картинка, на которой изображено движение поезда по рельсам.
Для создания анимации движения хочу использовать SVG. При всём этом у паровоза из
дымовой трубы выходит дым. Как сделать подобную анимацию, используя SVG? 


    

Ответы

Ответ 1

Поэтапно сделаем каждую деталь поезда. В основном будут использованы такие основные
команды: path, rect, circle, line.


Изначально создадим паровоз:




.st0 {
  fill: #A82F2F;
  stroke: #9F9F9F;
}

.st1 {
  opacity: 0.5;
  fill: #5B5B5B;
  stroke: #842323;
}

.st2 {
  fill: #D34040;
  stroke: #9F9F9F;
  stroke-width: 0.5;
}

.st3 {
  fill: #932727;
}

.st4 {
  fill: #D34040;
}

.st5 {
  fill: #5B4343;
}

.first-tr-str0 {
  fill: #DDCCCC;
  stroke: #EAE5E5;
}






Создаём оставшиеся прицепы поезда:










Сделаем рельсы от начала до конца ViewBox:










Теперь мы должны сделать анимацию дыма, выходящего из трубы паровоза:


  Будем использовать filter & animateTransform





.st0 {
  fill: #A82F2F;
  stroke: #9F9F9F;
}

.st1 {
  opacity: 0.5;
  fill: #5B5B5B;
  stroke: #842323;
}

.st2 {
  fill: #D34040;
  stroke: #9F9F9F;
  stroke-width: 0.5;
}

.st3 {
  fill: #932727;
}

.st4 {
  fill: #D34040;
}

.st5 {
  fill: #5B4343;
}

.first-tr-str0 {
  fill: #DDCCCC;
  stroke: #EAE5E5;
}





Почти готово, осталось соединить всё в одну конструкцию и сделать анимацию движения
поезда по заданной траектории, используя path:



* {
  margin: 0;
  padding: 0;
}

svg {
  background-color: #ddd;
}

.st0 {
  fill: #A82F2F;
  stroke: #9F9F9F;
}

.st1 {
  opacity: 0.5;
  fill: #5B5B5B;
  stroke: #842323;
}

.st2 {
  fill: #D34040;
  stroke: #9F9F9F;
  stroke-width: 0.5;
}

.st3 {
  fill: #932727;
}

.st4 {
  fill: #D34040;
}

.st5 {
  fill: #5B4343;
}

.first-tr-str0 {
  fill: #DDCCCC;
  stroke: #EAE5E5;
}





Update:
Использовал  для оптимизации SVG

Связанный вопрос: Как нарисовать автомобиль с помощью команд SVG