小编Rog*_*ker的帖子

由于SVG SMIL动画正在被弃用,我正在尝试将一些形状变形动画转换为CSS3关键帧动画.大多数转换都是直接的,除了我正在使用path属性的转换d=.

例如,此SVG在3(实际为4,但开头/结尾相等)阶段之间变形:

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 3">
    <path fill="#2ECC71" d="M0 9h9V0L0 0">
      <animate attributeName="d" 
               values="M0 9h9V0L0 0; M0 9h9V0L1 0; M0 9h9V0L1 1; M0 9h9V0L0 0"
               repeatCount="indefinite"
               calcMode="spline"
               keySplines=".75 .1 .25 .9; .75 .1 .25 .9; .75 .1 .25 .9" 
               keyTimes="0; .33; .66; 1"
               dur="10s" />
    </path>
  </svg>

我(相当乐观)的转换@keyframes看起来像

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 3">
    <defs>
      <style type="text/css">
        @keyframes anima {
          0% {
            d: M0 9h9V0L0 0;
          }
          33% {
            d: M0 9h9V0L1 0; …