Как переместить только одну точку из множества в SVG?

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

Пишу SVG + анимация, и столкнулся с такой задачей,-  нужно анимировать только одну
точку из множества в координатах SVG(чтобы эта точка плавно изменяла свое местоположение
с привязкой линии от других точек).
Например: 

d="M10,10 L20,10 L20,20 z" //чтобы плавно переместилась в
d="M10,10 L123,10 L20,20 z"


Как это можно сделать только кодом? Без сторонних программ типа Иллюстратора
    

Ответы

Ответ 1

Анимируется атрибут d патча. 
Подставляется первое значение и финальное положение, через точку с запятой

values="M10,10 L20,10 L20,20 z;M10,10 L123,10 L20,20z;M10,10 L20,10 L20,20 z"



.container {
width:100%;
height:100%;
}

 





Туда, обратно  

Подставляется в values три значения: стартовое;финальное;стартовое



.container {
width:100%;
height:100%;
}

 



  

В атрибут values можно подставить сколько угодно промежуточных значений патча,
 главное следить, чтобы количество контрольных точек было одинаково у всех промежуточных
значений