Получение текущих координат для морфируемого SVG с помощью JavaScript

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

Создайте анимацию морфинга пятиугольника в квадрат.

Чтобы преобразовать одну фигуру в другую, вам нужны два патча с одинаковым количеством узлов.
В нашем случае, если у пятиугольника должно быть пять узлов, то у пятна квадрата также есть пять.
Нарисуйте фигуры в векторном редакторе, например, Inkscape.

• Задайте размер документа 400х400 px

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

• В палитре инструментов выберите полигоны

• Установите курсор в центр документа и нарисуйте пятиугольник

• Выберите меню: объект Contour/Ocontur (Shift + Ctrl + C)
• Мы сохраняем файлы в формате *.svg, но редактор не закрывает
• Из всего кода файла нам нужна только одна строка с атрибутом d = "m..z"

<path d="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z"/>

• Вернитесь к Inkscape, выберите инструмент - отредактируйте контурные узлы, и перетащите узлы, чтобы сделать квадрат

  

• Снова сохраните файл и скопируйте новые значения атрибута d = "m..". Значения, которые мы получаем, необходимы для замены в значениях переменных = ".."

values="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z; m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z"

Точка с запятой разделяет значения пути для квадрата и пятиугольника. С анимацией путь изменится с одного значения на другое.

Ниже приведен код, который реализует анимацию плавного преобразования одной фигуры в другую:

Начать анимацию при нажатии на svg

 <svg id="svg2" width="400" height="400" viewBox="0 0 400 400" id="svg2" version="1.1">
      
      <g id="layer1" transform="translate(0,-652.36216)" style="fill:yellowgreen;stroke-width:3;stroke:dodgerblue">
        <path d="m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z" >
    	 <animate attributeName="d" begin="svg2.click" dur="6s" fill="freeze" repeatCount="1" restart="whenNotActive" 
          values=" m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z;
		           m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" />	  
          

	</path>
      </g>
    </svg>		

Куда,

<animate attributeName="d" - атрибут команды анимации 'd'

begin="svg2.click" - начать анимацию при нажатии на svg

dur="6s" - Продолжительность анимации 6 секунд

fill="freeze" - после окончания анимации фигура замерзает в своей конечной позиции

repeatCount="1" - Однократное повторение

restart="whenNotActive" - запретить перезагрузку анимации до ее завершения

Более сложный пример того же метода

Всплывающая подсказка анимации со стрелками по стрелке

• Из файла svg, сделанного в Inkscape, скопируйте всплывающую подсказку патча

<svg version="1.1"  viewBox="0 0 240 240"  >
  <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>

• Измените форму всплывающей подсказки заготовки, перетащив узлы

• Снова скопируйте патч из нового svg файла Inkscape

<svg id="svg1" version="1.1"  viewBox="0 0 240 240"   >
  <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.4;stroke:#0391fd"/>
  </svg>

• Как и в первом примере, мы делаем анимацию атрибутом патча d

body {
  background: url('http://badumka.ru/images/1523569_krasochnaya-priroda.jpg') no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.bdiv {
  display: table;
}

.container {
  position: relative;
  width: 500px;
  margin: 0 auto;
}  

<div class="bdiv">
  <div class="container">
    <svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
      <g transform="scale(0.8)">
        <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:dodgerblue;stroke-linecap:round;stroke-linejoin:round; fill-opacity:0.5">
          <animate id="an_path" attributeName="d" values="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
      m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z; m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z  "
          begin="svg1.click" dur="8s" repeatCount="1" fill="freeze"></animate>
        </path>
        <text x="30" y="50" font-size="18" fill="white">click me </text>
      </g>
    </svg>
  </div>
</div>

Анимация атрибута "d" патча - очень мощный и эффективный инструмент, который позволяет реализовать множество преобразований.

После освоения и понимания ручного метода анимации SVG-форм гораздо проще использовать библиотеки JS.