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

#html #css #css3 #svg #css_animation

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

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

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

   

Источник:
    

Ответы

Ответ 1

Также не стоит забывать, что свойство 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%);
  }
}





Ответ 2

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

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








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

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

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

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

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


Ответ 3

Такой эффект достижим с transform:scaley:

(JS тут только для формирования случайной картинки, анимация - css)



let n = 5, w = innerWidth - 20, h = innerHeight - 20;
let pts = Array(n).fill(0).map((_, i) => [(1+i)*(w/(n+1)), -Math.random()* h]);

document.body.innerHTML += ``;
  
@keyframes grow {
  0%   {transform: scaley(0)}
  100% {transform: scaley(1)}
}

polygon {
  fill: #e45;
  animation: grow 0.5s forwards;
}