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

SMIL没有死亡/弃用as you believe it is。 Chrome开发者最近发布了这个：

我们非常重视您的所有反馈，而且很明显SMIL提供的用例还没有高保真替代品。因此，我们决定暂停我们弃用的意图，并采取更小的步骤来实现其他选择。

Answer 2

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

此外，Chrome消息只是一个弃用消息，它＆＃39;尚未从此浏览器中删除，我怀疑支持它的其他浏览器会很快删除它。

无论如何，由于fakesmile这样的javascript polyfills，你已经可以在不支持它的浏览器上实现类似SMIL的动画（例如IE）。

不幸的是，通过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

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

2 个答案: