Как анимировать точки SVG полигона?

424

31 марта 2017, 22:17

Я создал линейную диаграмму с SVG (точками полигона), которые я хотел бы анимировать.

Мне нужно, чтобы все точки начали анимацию вверх от оси X, и когда анимация закончится, результат выглядел бы следующим образом, как на рисунке ниже.

Кажется, что нет простого способа найти это решения с помощью поиска в Google, который я сделал. Любые советы будут наиболее ценными, спасибо.

Перевод вопроса: How to animate SVG polygon points? @Keith Donegan

Answer 1

Что вы подразумеваете под «анимацией с оси X»? Вы имеете в виду, что начинаете строить диаграмму и анимировать её до формы, как на рисунке?

Если это так, то на самом деле это очень легко.

<svg  xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2040 352"> 
  <defs> 
  </defs> 
   
  <polygon points="" fill="red"> 
     <animate attributeName="points" dur="6s" fill="freeze" repeatCount="4" 
             values = "0,352, 550,352, 1240,352, 1592,352, 1880,352, 2040,352, 
                   2040,352,0,352; 0,292, 550,232, 1240,258, 1592,158, 1880,168, 2040,0, 
                   2040,352,0,352;0,352, 550,352, 1240,352, 1592,352, 1880,352, 2040,352, 
                   2040,352,0,352 " />            
			  
  </polygon> 
</svg>

В этом примере используются простые анимации SVG SMIL. Вы также можете использовать одну из нескольких графических или анимационных библиотек SVG.

Перевод ответа: How to animate SVG polygon points?@Paul LeBeau

Примечание переводчика

Вся соль анимации заключается в одной строчке, вернее даже в значении
values =" a1,b1; a2,b2; a1,b1" ,где a1,b1 - координаты парами всех точек ломанной линии в первом положении.

Через точку с запятой идут координаты точек в финальном положении a2,b2 и снова через точку с запятой координаты точек в начальном положении.
Таким образом анимация плавно перемещает ломанную линию от старта до финиша и обратно.

Answer 2

Также не стоит забывать, что свойство clip-path можно анимировать.

UPD: + SVG-fallback для фаерфокса, однако в этом браузере анимации не будет.

.graph { 
  background-image: linear-gradient(to right, #000 20%, #666 20%, #666 40%, #bbb 40%, #bbb 60%, #ccc 60%, #ccc 80%, #eee 80%); 
  height: 200px; 
  animation: graph 2s forwards; 
  -webkit-clip-path: polygon(0% 100%, 20% 100%, 40% 100%, 60% 100%, 80% 100%, 100% 100%, 100% 100%, 80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%); 
  clip-path: url('#clip-start'); 
  clip-path: polygon(0% 100%, 20% 100%, 40% 100%, 60% 100%, 80% 100%, 100% 100%, 100% 100%, 80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%); 
} 
 
@keyframes graph { 
  to { 
    -webkit-clip-path: polygon(0% 90%, 20% 80%, 40% 50%, 60% 30%, 80% 60%, 100% 0%, 100% 100%, 80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%); 
    clip-path: url('#clip-finish'); 
    clip-path: polygon(0% 90%, 20% 80%, 40% 50%, 60% 30%, 80% 60%, 100% 0%, 100% 100%, 80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%); 
  } 
}

<div class=graph></div> 
 
<svg> 
  <defs> 
    <clipPath id="clip-start" clipPathunits="objectBoundingBox"> 
      <polygon points="0,1 .2,1 .4,1 .6,1 .8,1 1,1 1,1 .8,1 .6,1 .4,1 .2,1 0,1" /> 
    </clipPath> 
    <clipPath id="clip-finish" clipPathunits="objectBoundingBox"> 
      <polygon points="0,.9 .2,.8 .4,.5 .6,.3 .8,.6 1,0 1,1 .8,1 .6,1 .4,1 .2,1 0,1" /> 
    </clipPath> 
  </defs> 
</svg>