SVG автоматическая анимация морфинга между 2 кадрами

Question

У меня есть 2 изображения SVG из тех же объектов, имеющих разные конфигурации (переводы и вращения). Упрощенный пример:

fil1.svg:

<svg width="800" height="800"> 
    <rect id="r1" fill="#11CC99" x="0" y="0" width="100" height="200" 
    transform="matrix(0.8211913,-0.570653,0.570653,0.8211913,0,100)" 
    /> 
    <circle id="c1" fill="#99CC11" cx="0" cy="0" r="100" 
     transform="matrix(1,0,0,1,242,100)" 
    /> 
    </svg> 

file2.svg:

<svg width="800" height="800"> 
    <rect id="r1" fill="#11CC99" x="0" y="0" width="100" height="200" 
     transform="matrix(0.8211913,-0.570653,0.570653,0.8211913,30,80)" 
    /> 
    <circle id="c1" fill="#99CC11" cx="0" cy="0" r="100" 
     transform="matrix(1,0,0,1,240,300)" 
    /> 
    </svg> 

Есть инструмент (или библиотека для Python, JS ...), которая автоматически строить третью SVG файл с анимацией, начиная с первой конфигурации до второй? Я ожидаю, что полученный файл svg содержит скрипт вроде:

<svg> 
... 
    <circle id="c1" fill="#99CC11" cx="0" cy="0" r="100" 
     transform="matrix(1,0,0,1,242,100)"> 
     <animateTransform attributeName="transform" attributeType="XML" 
     type="translate" 
     from="242 100" 
     to="240 300" 
     begins="0s" 
     dur="1s"/> 
    </circle> 
</svg> 

И аналогичный код для прямоугольника. Я ожидаю, что матрицы преобразования координат линейны относительно времени анимации.

Answer 1

Как насчет 9VAe. См. Six steps to make SVG Animation from Openclipart.

1. Открыть file1.svg с 9VAe.
2. Скопируйте первую страницу на вторую страницу.
3. Импортировать файл2.svg на вторую страницу.
4. Измените файл file1.svg на file2.svg на второй странице.
5. Удалить file2.svg.
6. Экспорт SVG.

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

<svg width="800" height="800"> 
 
    <path fill="#11cc99" stroke="none"> 
 
    <animate repeatCount="indefinite" begin="0.00s" dur="1.00s" attributeName="d" 
 
     from="M0.00,100.00L82.06,42.88 196.19,207.12 114.12,264.19 
 
0.00,100.00 Z" 
 
     to="M31.00,78.06L113.06,20.94 227.19,185.19 145.12,242.25 31.00,78.06 Z" /> 
 
    </path> 
 
    <path fill="#99cc11" stroke="none"> 
 
    <animate repeatCount="indefinite" begin="0.00s" dur="1.00s" attributeName="d" 
 
     from="M342.00,100.00C342.81,128.19 333.25,151.31 312.69,170.69 C293.31,191.25 270.19,200.81 242.00,200.00 C213.75,200.81 190.56,191.25 171.25,170.69 C150.69,151.31 141.12,128.19 142.00,100.00 C141.12,71.75 150.69,48.56 171.25,29.25 C190.56,8.69 213.75,-0.88 242.00,0.00 C270.19,-0.88 293.31,8.69 312.69,29.25 C333.25,48.56 342.81,71.75 342.00,100.00 Z" 
 
     to="M342.00,299.44C342.81,327.62 333.25,350.75 312.69,370.12 C293.31,390.69 270.19,400.25 242.00,399.44 C213.75,400.25 190.56,390.69 171.25,370.12 C150.69,350.75 141.12,327.62 142.00,299.44 C141.12,271.19 150.69,248.00 171.25,228.69 C190.56,208.12 213.75,198.56 242.00,199.44 C270.19,198.56 293.31,208.12 312.69,228.69 C333.25,248.00 342.81,271.19 342.00,299.44 Z" /> 
 

 
    </path> 
 
</svg>