Как данный пример анимации CSS сделать на чистом SVG SMIL

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

Как данный пример полностью реализовать на svg, без единой строчки css. css можно
стилизовать только сам тег svg



*,
* ::after,
*::before {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
  color: white;
}

#wrapper {
  width: 100%;
  height: 100%;
}

#iconWrapper {
  position: relative;
  margin: 50px 0 0 50px;
  width: 50px;
  height: 45px;
  border: 1px solid white;
}

.iconLine {
  position: absolute;
  margin-left: 5px;
  width: 40px;
  height: 5px;
  background: #fff;
  transition: transform .5s, background .1s .3s, top .5s .5s;
}

.lineOne {
  top: 5px;
}

.lineTwo {
  top: 20px;
}

.lineThree {
  top: 35px;
}

#iconWrapper:hover .lineOne {
  top: 20px;
  transform: rotateZ(-45deg);
  transition: transform .5s .5s, top .5s;
}

#iconWrapper:hover .lineTwo {
  top: 20px;
  background: transparent;
  transition: transform .5s .5s, background .5s .3s, top .5s;
}

#iconWrapper:hover .lineThree {
  top: 20px;
  transform: rotateZ(45deg);
  transition: transform .5s .5s, top .5s;
}

  

    

    

    

  




    

Ответы

Ответ 1

Чтобы было легче сравнивать команды анимации CSS и SVG,- наименования классов, уникальных
идентификаторов будут одинаковы в обоих примерах.
Анимацию SVG можно сделать по разному, очень коротким кодом, но опять же, для лучшего
понимания будем делать подробно, последовательно и нудно. 


Линии нарисованы с помощью  ширина линий задана -
stroke-width="4"




 




Для повторения примера анимации на CSS,
необходимо сделать несколько последовательных анимаций SVG:


Верхняя и нижняя линии сдвигаются навстречу друг другу в одну позицию со средней линией.
Средняя линия исчезает, так как её не должно быть видно при повороте крайних линий
Поворот одной линии против часовой стрелки на -45° 
Поворот второй линии по часовой стрелке на 45°  
Обратный поворот наклонных линий в горизонтальное положение.
Появление средней линии    
Возврат первой и третьей линии на исходную позицию   


#1.  Анимация начинается после клика по чёрному квадрату. begin="iconWrapper.click" 








К первой анимации придётся давать много пояснений, дальше пойдёт легче  

pointer-events="none"
Так как белые линии находятся выше чёрного квадрата, необходимо сделать их прозрачными
для клика, если курсор попадает на них.
Другими словами,- клик, как команда для начала анимации сработает при любом расположении
курсора, хоть на белых линиях, хоть на чёрном фоне.  

attributeName="points" - атрибут, который будет анимироваться,- внутри него набор
координат начальной и конечной точек одной линии - .      

values="5 10 45 10;5 25 45 25" - до точки запятой координаты линии в начальном положении,
после точки с запятой координаты в конечном положении. 

fill="freeze" - заморозка линии в конечном положении.
 restart="never" - защита от повторного мгновенного клика, иначе начнется повторная
анимация не дожидаясь окончания исходной анимации.   

#2. Средняя линия исчезает, так как её не должно быть видно при повороте крайних
линий     






  

Анимации исчезновения средней линии не видно, так как средняя линия находится под
другими линиями, но её следует убрать заранее до вращения других линий. 

attributeName="opacity" values="1;0" - прозрачность линии изменяется от нуля до 100%
begin="an1_Line3.end" - начало анимации сразу после завершения предыдущей анимации,
сближения линий.      

#3. Поворот одной линии против часовой стрелки на -45°
#4. Поворот второй линии по часовой стрелке на 45°     










type="rotate"  values="0 25 25; 45 25 25" - поворот по часовой стрелке на 45° 
 группа цифр после точки с запятой - ; конечное положение линии45 25 25 - угол и
координаты центра вращения.
 begin="hide.end" - анимация вращения начнется по окончанию анимации сокрытия линии 

#5. Обратный поворот наклонных линий в горизонтальное положение.
#6. Появление средней линии
#7. Возврат первой и третьей линии на исходную позицию      








    

SVG SMIL анимация,- это декларативная анимация. Поэтому у неё нет переменных.
 То есть негде хранить и считать клики в интерактивном режиме анимации.
 Поэтому для выполнения таких действий, как в примере автора вопроса, необходимо
всё таки подключать или CSS в виде скрытых чекбоксов или JS. 

SVG хорошо работает в паре c  CSS, JS. Стили CSS можно добавлять внутри файла SVG
в  стилях представления:

вот так:   

     


или так:     




или добавлять стили внутри файла svg:




Вот перевод отличной статьи , в которой автор - Sara Soueidan, попыталась кратко
и доходчиво на примерах изложить основы анимации:     

Руководство по анимации SVG (SMIL)