Есть ли другой способ сделать анимированные контуры или полигоны без использования SMIL

Question

SMIL устарела и больше не собирается работать на Chrome

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

редактировать: это действительно правда, к сожалению.

Теперь у меня вопрос: есть ли другой способ создания анимированных контуров или полигонов без использования SMIL? Например, могу ли я поиграть с атрибутом "d" пути, используя что-то, что не является SMIL?

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

Answer 1

Во-первых, вы должны заметить, что SMIL устарел только после Chrome 45 и Opera 32. Это означает, что в консоли есть предупреждение, но функции все еще работают (декабрь 2015 г.).

canIuse заявляет:

Начиная с Chrome 45 и Opera 32 SMIL устарел, и его использование приведет к появлению предупреждения в консоли. Ожидается, что поддержка будет прекращена в некоторых будущих версиях.

Для получения дополнительной информации об этом, вы также можете проверить эту тему: Намерение отказаться от SMIL

---

Альтернативой трансформации пути SVG с помощью SMIL является использование snap.svg. Вот пример:

var s = Snap().attr({viewBox: '0 0 100 150'});

s.path('M50 10 C50 10, 10 50, 50 50 C50 50, 10 10, 50 10z')
 .animate({ d: "M50 10 C90 10, 10 90, 50 90 C90 90, 10 10, 50 10z" }, 2000, mina.elastic);

svg {width: 30%;height: auto;stroke-width: 1;stroke: #000;fill: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>

Обратите внимание, что вы также можете использовать greensock с плагином morphSVG.