Question

由于SVG SMIL动画已被弃用，我试图将一些形状变形动画转换为CSS3关键帧动画。除了我使用路径属性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;
          }
          66% {
            d: M0 9h9V0L1 1;
          }
          100% {
            d: M0 9h9V0L0 0;
          }
        }

        #a {
          animation: anima 10s ease-in-out infinite;
        fill: #22A7F0;
        }
      </style>
    </defs>
    <path id="a" d="M0 9h9V0L0 0" />
  </svg>

虽然这确实绘制了初始形状，但没有动画。提供线索的唯一浏览器是Firefox，其中提到：Unknown property 'd'. Declaration dropped.。这是有道理的，虽然我似乎无法弄清楚如何在不使用SMIL的情况下声明变形形状。

强制示威can be found on Codepen

我想保持SVG独立，因此如果可以避免使用javascript则不是一个选项（因为我使用SVG作为背景图像）。对于这个例子看起来很诱人，我也试图避免使用CSS transforms作为SVG我转换由各种形状组合在一起变形。

将SVG SMIL属性动画转换为CSS

0 个答案: