将 SVG SMIL 动画转换为 CSS 动画答案

【问题标题】：Convert SVG SMIL animation to CSS animation将 SVG SMIL 动画转换为 CSS 动画
【发布时间】：2016-09-18 00:03:17
【问题描述】：

我当前的 SVG 是使用 SVG SMIL 动画制作的：

<?xml version="1.0" encoding="utf-8"?>
<svg height="512px" viewBox="0 0 100 100" width="512px" xmlns="http://www.w3.org/2000/svg">
    <g transform="scale(0.8) translate(-0.6, -0.6)">
        <g id="spinner">
            <path d="M50 15A35 35 0 1 0 74.787 25.213" fill="none" stroke="#19a29c" stroke-width="8px"/>
            <path d="M50 0L50 30L66 15L50 0" fill="#19a29c"/>
            <animateTransform attributeName="transform" dur="1.5s" from="0 50 50" repeatCount="indefinite" to="360 50 50" type="rotate"/>
        </g>
    </g>
</svg>

SVG SMIL 动画在 IE 中不受支持，并且在 Chrome 中已被弃用： http://caniuse.com/#feat=svg-smil

我想用 CSS 动画替换动画部分，使动画得到更广泛的支持和未来的证明：http://caniuse.com/#feat=css-animation

如何将以下 SVG SMIL 动画替换为 CSS 动画？

<animateTransform attributeName="transform" dur="1.5s" from="0 50 50" repeatCount="indefinite" to="360 50 50" type="rotate"/>

【问题讨论】：

使用 shim 会更容易，这将是一行更改而不是重写所有代码？

标签： css animation svg css-animations

【解决方案1】：

使用 SMIL 完成的动画是一个旋转动画，其中#spinner 元素每 1.5 秒旋转 360 度，并具有无限循环。 transform 属性的最后两个参数是transform-origin，因此要创建等效的 CSS，必须执行以下操作：

创建动画 @keyframe 规则，该规则将 transform: rotate() 从 0 度到 360 度。
使用animation 属性将动画应用到#spinner 元素。设置其持续时间为 1.5s，迭代次数为无限，计时函数为线性。这些可以使用animation 速记属性（或）使用单独的animation-name、animation-duration、animation-iteration-count 和animation-timing-function 属性来完成。
将transform-origin 设置为#spinner 元素的50px 50px。

#spinner {
  animation: rotate 1.5s infinite linear;
  transform-origin: 50px 50px;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<?xml version="1.0" encoding="utf-8" ?>
<svg height="512px" viewBox="0 0 100 100" width="512px" xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(0.8) translate(-0.6, -0.6)">
    <g id="spinner">
      <path d="M50 15A35 35 0 1 0 74.787 25.213" fill="none" stroke="#19a29c" stroke-width="8px" />
      <path d="M50 0L50 30L66 15L50 0" fill="#19a29c" />
    </g>
  </g>
</svg>

如果你想将 SVG 保存为一个单独的文件并使用它（比如 background-image 等），那么你可以在 <style> 标签内添加 CSS 动画代码并将其放在 <svg> 标签内。 Here is a Plunker demo。（注意：正如 Kaiido 在评论中提到的，这似乎只适用于 Chrome、Opera。）

【讨论】：

感谢@Kaiido 的评论。让我检查一下。它在 Chrome 中运行良好。
是的，这个@Kaiido 似乎没有解决方法。再次感谢您指出这一点。我会在答案中添加注释。