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

10 июня 2019, 10:30

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

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

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

Answer 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%; 
}

<div class="container"> 
<svg id="svg1" viewBox="0 0 200 200" style="border:1px solid red;"> 
 <path id="pth1" d="M10,10 L20,10 L20,20 z" fill="greenyellow" stroke="gray"> 
  <animate 
  attributeName="d" 
  begin="svg1.click" 
  dur="2s" 
  values="M10,10 L20,10 L20,20 z;M10,10 L123,10 L20,20z" 
  fill="freeze"/> 
</svg>  
</div>

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

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

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

<div class="container"> 
<svg id="svg1" viewBox="0 0 200 200" style="border:1px solid red;"> 
 <path id="pth1" d="M10,10 L20,10 L20,20 z" fill="greenyellow" stroke="gray"> 
  <animate 
  attributeName="d" 
  begin="svg1.click" 
  dur="4s" 
  values="M10,10 L20,10 L20,20 z;M10,10 L123,10 L20,20z;M10,10 L20,10 L20,20 z" 
  fill="freeze"/> 
</svg>  
</div>

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