SVG объединяется в анимацию

Question

Мне известны возможности SVG для анимации, но есть ли способ легко объединить изображения в анимацию, как в анимированных GIF-файлах?Например, цикл между кругом

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

и прямоугольником

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

Answer 1

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

Фактическое преобразование формы из одного в другое, вероятно, должно быть сделано вами с помощью JavaScript.

Answer 2

Если бы вы использовали элементы path вместо базовых прямоугольников и элементов круга, можно было бы использовать морфинг траектории для преобразования одной фигуры в другую с использованием SVG-анимации.

Довольно неплохо Пример этого на carto.net .

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

Answer 3

Если ваш SVG будет просматриваться в веб-браузере, вы можете анимировать его, манипулируя узлами с помощью JavaScript. Мой "веб-сайт" является примером этого.