без smil, gif мой единственный вариант?

Question

Так я недавно столкнулся с этим предупреждением

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

Doing как много исследований, как я мог, я продолжаю находить отговорки о замене SMIL с веб-анимации (которые SMIL является, если мы, будучи техническими) но все это включает JavaScript и CSS. Я использую анимированные SVG в тегах <img>, потому что это точка формата SVG: это изображение.

Это было действительно приятно и все потому, что это позволяло мне, по крайней мере, упорядочивать мои изображения в сети, которая известна как гигантский беспорядок (например, у JavaScript нет импорта, поэтому вам нужно заполнить глобальную область).

Теперь, когда я не могу жить с SVG, является ли GIF единственным вариантом автономной анимации?

Answer 1

SMIL не так мертвый/устаревший as you believe it is.Недавно разработчики Chrome опубликовали это сообщение:

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

Answer 2

В SVG2 большая часть функциональности SMIL должна быть доступна с помощью анимации CSS.
Но они все еще в черновике, и только хром начал реализовывать некоторые.

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

Во всяком случае, вы можете уже достичь анимации SMIL, как браузер в браузере, не поддерживающий его (например, IE) благодаря полисам вроде javascript, например fakesmile.

К сожалению, скрипты в документах svg, загружаемых через элемент HTMLImage (<img>), не будут работать. Поэтому вам нужно переключиться с тега <img> на теги , <object> или <embed>. Эти теги позволяют выполнять скрипты, поэтому вам просто нужно импортировать полипол в ваш документ svg, а затем загрузить изображение, как вы это делали бы в теге <img>.

Вот пример, который будет работать на IE:

SMILTest.svg

<svg width="120" height="120" 
    viewPort="0 0 120 120" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <rect x="10" y="10" width="100" height="100"> 
     <animate attributeType="XML" 
       attributeName="x" 
       from="-100" to="120" 
       dur="10s" 
       repeatCount="indefinite"/> 
    </rect> 

    <script xlink:href="https://cdn.rawgit.com/FakeSmile/FakeSmile/master/smil.user.js"></script> 

</svg> 

index.html

... 
<object data="SMILTest.svg"></object> 
... 

Live example

---

Если все ваши SVG изображения подаются с того же домена, как главной странице, вы можете также автоматизировать его с чем-то вроде этого:

window.addEventListener('load', function(){ 

    var obj = document.querySelectorAll('object[data*=".svg"],iframe[src*=".svg"],embed[src*=".svg"]'); 
    Array.prototype.forEach.call(obj, function(o){ 
     var doc = o.contentDocument; 
     var s = document.createElementNS('http://www.w3.org/2000/svg','script'); 
     doc.documentElement.appendChild(s); 
     s.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://cdn.rawgit.com/FakeSmile/FakeSmile/master/smil.user.js'); 
     }); 

    }); 

Live example