Question

我刚刚使用在线服务生成了一个基于SVG的加载指示器，但每次加载使用它时，我都会收到Chrome的警告，告知我SMIL动画已被弃用，这是相当讨厌的。为了摆脱它，我决定考虑用Web动画替换<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"> <circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/> <circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round"> <animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/> <animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/> </circle> </svg>标签。以下是原始SVG：

<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/>
  <circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round" id="line"/>
  <script type="text/javascript" xlink:href="https://cdn.rawgit.com/web-animations/web-animations-js/45d8e40300e82ff02ccfbbc78c89500de0f5616f/web-animations.min.js"></script>
  <script type="text/javascript"><![CDATA[
    var line = document.getElementById("line");
    line.animate(
      [
        {strokeDashoffset:0},
        {strokeDashoffset:502}
      ],
      { duration: 2000, iterations: Infinity }
    );
    line.animate(
      [
        {strokeDasharray:"150.6 100.4"},
        {strokeDasharray:"1 250"},
        {strokeDasharray:"150.6 100.4"}
      ],
      { duration: 2000, iterations: Infinity }
    );
  ]]></script>
</svg>

这就是我最终的结果：

background-image

我真的很兴奋，我设法使它工作，然后当我注意到完全相同的SVG，当用作CSS中的body:before { content: ''; display: block; width: 200px; height: 200px; background: url('data:image/svg+xml;utf8,<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round" id="line"/><script type="text/javascript" xlink:href="https://cdn.rawgit.com/web-animations/web-animations-js/45d8e40300e82ff02ccfbbc78c89500de0f5616f/web-animations.min.js"></script><script type="text/javascript"><![CDATA[var line = document.getElementById("line");line.animate([{strokeDashoffset:0},{strokeDashoffset:502}],{ duration: 2000, iterations: Infinity });line.animate([{strokeDasharray:"150.6 100.4"},{strokeDasharray:"1 250"},{strokeDasharray:"150.6 100.4"}],{ duration: 2000, iterations: Infinity });]]></script></svg>') no-repeat center center; background-size: contain; }时，我的笑容在我的脸上冻结了，拒绝完全动画（下面的演示;请注意我在这里使用数据URI内联SVG，但是当使用常规URL加载SVG时会发生同样的情况。）

{{1}}

我应该忽略警告并继续使用SMIL，还是有办法让Web动画在SVG中运行？

Answer 1

不幸的是，目前还没有支持backgrounImage属性的动画。

虽然CSS背景和边框模块3级编辑的草案说明了 “动画：否”为写作时的背景图像，支持用于交叉淡化图像的CSS出现在Chrome 19 Canary中。直到广泛的支持到达这可以通过图像精灵伪造背景位置或不透明度。要为渐变设置动画，它们必须是相同类型

您可以在以下文章中阅读更多内容：

http://oli.jp/2010/css-animatable-properties/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

SVG中的Web动画在用作背景图像时会中断

1 个答案: