Использование CSS (или JavaScript) вместо SMIL

я вижу следующее предупреждение в моей хромированной консоли:Использование CSS (или JavaScript) вместо SMIL

SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

Так что я хочу, чтобы заменить SMIL с помощью CSS.
Есть несколько вещей, которые я могу сделать в CSS, но я не знаю, как это сделать. Моя проблема в том, что Я анимированный атрибут d в SMIL, и я не знаю, могу ли я/как это сделать в CSS. Вот мой код:

svg{ 
 
\t position: fixed; 
 
}

<svg width="500" height="500" viewBox="0 0 500 500"> 
 
\t <path id="rect" fill="lightblue" d="M10 10 L30 10 L30 30 L10 30 Z"/> 
 
\t <animate xlink:href="#rect" 
 
\t \t attributeName="d" 
 
\t \t attributeType="XML" 
 
\t \t values="M20 20 L30 20 L40 40 L20 40 Z; 
 
\t \t M10 10 L30 10 L40 30 L10 40 Z; 
 
\t \t M10 10 L30 10 L30 30 L10 30 Z; 
 
\t \t M20 20 L30 20 L40 40 L20 40 Z" 
 
\t \t begin="0s" 
 
\t \t dur="2s" 
 
\t \t repeatCount="indefinite" 
 
\t /> 
 
</svg>

Спасибо!

P.S .: Если это невозможно в CSS или быстрее в JavaScript, JavaScript тоже будет хорошим.

источник

2015-09-05 Tomato

В настоящее время это невозможно сделать в CSS. Его довольно сложно в javascript, так как вам придется реализовать механизм интерполяции. –

Какой механизм интерполяции вы рекомендуете? (Мне нужно только сделать анимацию с атрибутом d) – Tomato

, когда я написал * implement * Я имел в виду, что вам придется писать один самостоятельно. –

Я написал некоторый JavaScript для интерполяции между путями. Он очень прост в использовании. Вы просто добавить скрипт на свою страницу и написать следующие строки:

var rect = new bigT('#rect'); 
rect.indefinite(true) 
     .easing("linear") 
     .duration(2000) 
     .setPathKeyframes(
     "M20 20 L30 20 L40 40 L20 40 Z", 
     "M10 10 L30 10 L40 30 L10 40 Z", 
     "M10 10 L30 10 L30 30 L10 30 Z", 
     "M20 20 L30 20 L40 40 L20 40 Z"); 
rect.startAnimation();

Вы можете скачать здесь bigT.js

Кроме того, здесь предварительный с SVG: http://jsfiddle.net/r99fkndq/3/

В качестве альтернативы, вы можете использовать более обширная библиотека, такая как D3.js.

источник

2015-09-05 17:54:47

Использование CSS (или JavaScript) вместо SMIL

ответ

Смежные вопросы