6

Как данный пример полностью реализовать на 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;
}
<div id="wrapper">
  <div id="iconWrapper">
    <div class="iconLine lineOne"></div>
    <div class="iconLine lineTwo"></div>
    <div class="iconLine lineThree"></div>
  </div>
</div>

1 ответ 1

6

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

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

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   width="50" height="50"  viewBox="0 0 50 50"  >
<g   stroke-width="4" stroke="white" >
 
 <rect id="iconWrapper" width="50" height="50"  fill="#000" /> 
  
  <polyline id="lineOne" points="5 10 45 10"  />
  <polyline id="lineTwo" points="5 25 45 25"   /> 
  <polyline id="lineThree" points="5 40 45 40"  />
</g> 
</svg> 

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

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

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

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   width="50" height="50"  viewBox="0 0 50 50"  >

 <rect id="iconWrapper" width="50" height="50"  fill="#000" />   
   <g   stroke-width="4" stroke="white" pointer-events="none"; >
   <polyline id="lineOne" points="5 10 45 10"  />
  <polyline id="lineTwo" points="5 25 45 25"   /> 
  <polyline id="lineThree" points="5 40 45 40"  />
</g> 

<!-- Анимация движения верхней линии к центральной линии  --> 
<animate id="an1_Line1" xlink:href="#lineOne" attributeName="points" begin="iconWrapper.click" dur="0.25s"
values="5 10 45 10;5 25 45 25" fill="freeze" restart="never"  />
<!--  нижней линии к центральной линии  -->
<animate id="an1_Line3" xlink:href="#lineThree" attributeName="points" begin="iconWrapper.click" dur="0.25s"
values="5 40 45 40;5 25 45 25" fill="freeze" restart="never" />

</svg>

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

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

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

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

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

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

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   width="50" height="50"  viewBox="0 0 50 50"  >

 <rect id="iconWrapper" width="50" height="50"  fill="#000" />   
   <g   stroke-width="4" stroke="white" pointer-events="none"; >
   <polyline id="lineOne" points="5 10 45 10"  />
  <polyline id="lineTwo" points="5 25 45 25"   /> 
  <polyline id="lineThree" points="5 40 45 40"  />
</g> 

<!-- Анимация движения верхней к центральной линии  --> 
<animate id="an1_Line1" xlink:href="#lineOne" attributeName="points" begin="iconWrapper.click" dur="0.25s"
values="5 10 45 10;5 25 45 25" fill="freeze" restart="never"  />
<!--  нижней линии к центральной линии  -->
<animate id="an1_Line3" xlink:href="#lineThree" attributeName="points" begin="iconWrapper.click" dur="0.25s"
values="5 40 45 40;5 25 45 25" fill="freeze" restart="never" />
 <!-- Анимация исчезновения средней линии  --> 
<animate id="hide" xlink:href="#lineTwo" attributeName="opacity" values="1;0" dur="1ms" begin="an1_Line3.end" fill="freeze" restart="whenNotactive" />	

</svg>

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

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

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

<doctype! html>
<meta charset="utf-8">
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   width="50" height="50"  viewBox="0 0 50 50"  >

 <rect id="iconWrapper" width="50" height="50"  fill="#000" />   
   <g   stroke-width="4" stroke="white" pointer-events="none"; >
   <polyline id="lineOne" points="5 10 45 10"  />
  <polyline id="lineTwo" points="5 25 45 25"   /> 
  <polyline id="lineThree" points="5 40 45 40"  />
</g> 

<!-- Анимация движения верхней линии к центральной линии  --> 
<animate id="an1_Line1" xlink:href="#lineOne" attributeName="points" begin="iconWrapper.click" dur="0.25s"
values="5 10 45 10;5 25 45 25" fill="freeze" restart="never"  />
<!-- и нижней линии к центральной линии  -->
<animate id="an1_Line3" xlink:href="#lineThree" attributeName="points" begin="iconWrapper.click" dur="0.25s"
values="5 40 45 40;5 25 45 25" fill="freeze" restart="never" />
 <!-- Анимация исчезновения средней линии  --> 
<animate id="hide" xlink:href="#lineTwo" attributeName="opacity" values="1;0" dur="1ms" begin="an1_Line1.end" fill="freeze" restart="whenNotactive" />	  

<!-- Анимация поворота верхней и нижней на 45 градусов --> 
<animateTransform id="R_line1" attributeName="transform" attributeType="XML" xlink:href="#lineOne"
      type="rotate"  values="0 25 25; -45 25 25" begin="hide.end" dur="0.25s" fill="freeze" restart="never"  />  
 <animateTransform id="" attributeName="transform" attributeType="XML" xlink:href="#lineThree"
      type="rotate"  values="0 25 25; 45 25 25" begin="hide.end" dur="0.25s" fill="freeze" restart="never"  />  	
 
</svg>

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

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

<doctype! html>
<meta charset="utf-8">
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   width="50" height="50"  viewBox="0 0 50 50"  >

 <rect id="iconWrapper" width="50" height="50"  fill="#000" />   
   <g   stroke-width="4" stroke="white" pointer-events="none"; >
   <polyline id="lineOne" points="5 10 45 10"  />
  <polyline id="lineTwo" points="5 25 45 25"   /> 
  <polyline id="lineThree" points="5 40 45 40"  />
</g> 

<!-- Анимация движения верхней линии к центральной линии  --> 
<animate id="an1_Line1" xlink:href="#lineOne" attributeName="points" begin="iconWrapper.click" dur="0.25s"
values="5 10 45 10;5 25 45 25" fill="freeze" restart="never"  />
<!-- и нижней линии к центральной линии  -->
<animate id="an1_Line3" xlink:href="#lineThree" attributeName="points" begin="iconWrapper.click" dur="0.25s"
values="5 40 45 40;5 25 45 25" fill="freeze" restart="never" />
 <!-- Анимация исчезновения средней линии  --> 
<animate id="hide" xlink:href="#lineTwo" attributeName="opacity" values="1;0" dur="1ms" begin="an1_Line1.end" fill="freeze"  />	  

<!-- Анимация поворота верхней и нижней на 45 градусов --> 
<animateTransform id="R_line1" attributeName="transform" attributeType="XML" xlink:href="#lineOne"
      type="rotate" begin="hide.end" values="0 25 25; -45 25 25" dur="0.25s" fill="freeze" restart="never"  />  
 <animateTransform id="R_line3" attributeName="transform" attributeType="XML" xlink:href="#lineThree"
      type="rotate" begin="hide.end" values="0 25 25; 45 25 25" dur="0.25s" fill="freeze" restart="never"  />  	 

 <!-- Анимация обратного поворота верхней и нижней на 45 градусов -->   
<animateTransform id="L_line1" xlink:href="#lineOne" attributeName="transform" attributeType="XML" 
      type="rotate" begin="R_line3.end+1s" values="-45 25 25;0 25 25 " dur="0.25s" fill="freeze" restart="never"  />  
 <animateTransform id="L_line3" xlink:href="#lineThree" attributeName="transform" attributeType="XML" 
      type="rotate" begin="R_line3.end+1s" values="45 25 25;0 25 25 " dur="0.25s" fill="freeze" restart="never"  />  
	  
	   <!-- Анимация появления средней линии -->
   <animate id="visibleLine" xlink:href="#lineTwo" attributeName="opacity" values="0;1" dur="1ms" begin="L_line3.end" fill="freeze" restart="never" />	
  
  <!-- Анимация движения  линий от центральной линии --> 
 <animate id="an2_Line1" xlink:href="#lineOne" attributeName="points" begin="L_line3.end+0.1s" dur="0.25s"
values="5 25 45 25;5 10 45 10" fill="freeze" restart="never"  />
<animate id="an2_Line3" xlink:href="#lineThree" attributeName="points" begin="L_line3.end+0.1s" dur="0.25s"
values="5 25 45 25;5 40 45 40" fill="freeze" restart="never" />    
 
</svg>

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

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

вот так:

<rect class="rect1" width="100%" height="100%" fill="red" stroke="black" />     

или так:

<rect class="rect1" width="100%" height="100%" style="fill:red; stroke:black"/>

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

<svg>
<style>
 .rect {
 width:100%;
 height:100%;
 fill:red;
 stroke:black;
  }
</style> 
<rect class="rect1" x="10" y="20"/>
</svg>

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

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

7
  • Ты просто красавец....
    – Air
    29 янв 2018 в 16:31
  • @Air спасибо, если у людей хватит сил изучить много буков, то надеюсь, будет очень полезно для освоения нового уровня знаний. Я имею ввиду статью по ссылке :) Если будут вопросы, задавай, не стесняйся здесь или в чате об SVG chat.stackexchange.com/rooms/70612/svg-chat 29 янв 2018 в 16:45
  • Alexandr_TT, помоги человеку, а то я ему не смогу грамотно пример показать ru.stackoverflow.com/questions/777436/…
    – Air
    30 янв 2018 в 15:50
  • @Air если успею :) А то вон сколько людей там откликнулись/ Посмотри в разделе SVG я новый пост, почти спецом для тебя перевел по связке анимаций css - svg ru.stackoverflow.com/q/777708/28748 30 янв 2018 в 16:07
  • Кстати, седня заметил, что в этом ответе второй раз клик не работает
    – Air
    30 янв 2018 в 16:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.