没有 smil，gif 是我唯一的选择吗？

Question

所以我最近遇到了这个警告

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

尽我所能做更多的研究，我一直在寻找用网络动画替换 SMIL 的借口（如果我们是技术人员，SMIL 是）但这一切都涉及 JavaScript 和 CSS。我在 <img> 标签中使用动画 SVG，因为这是 SVG 格式的要点：它是一个图像。

这真的很棒，因为它让我至少可以在一个因混乱而臭名昭著的网络上组织我的图像（例如 JavaScript 没有导入，所以你必须填充全局范围） .

既然我不能用 SVG 制作动画，GIF 是独立动画的唯一选择吗？

Answer 1

在 SVG2 中，大多数 SMIL 功能应该可以通过 CSS 动画获得。
但这些仍处于草案阶段，只有 chrome 已经开始实施。

此外，chrome 消息只是一条弃用消息，尚未从该浏览器中删除，我怀疑支持它的其他浏览器会很快将其删除。

无论如何，由于 javascript 像 fakesmile.

这样的 polyfill，您已经可以在不支持它的浏览器（例如 IE）上实现类似 SMIL 的动画

遗憾的是，通过 HTMLImage 元素 (<img>) 加载的 svg 文档中的脚本不会运行。因此，您必须从 <img> 标签切换到 <iframe>、<object> 或 <embed> 标签。这些标签确实允许执行脚本，因此您只需在 svg 文档中导入 polyfill，然后像在 <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

Answer 2

SMIL 不像 dead/deprecated as you believe it is。 Chrome 开发人员最近发布了这个：

We value all of your feedback, and it's clear that there are use cases serviced by SMIL that just don’t have high-fidelity replacements yet. As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.

没有 smil，gif 是我唯一的选择吗？

without smil, is gif my only option?

svg

smil