Convert SVG SMIL attribute animation to CSS

As SVG SMIL animations are being deprecated, I'm trying to convert some shape morphing animation to CSS3 keyframe animations. Most conversions are straight forward, except for the ones where I'm using the path attribute d= .

For example, this SVG morphs between 3 (actually 4, but the beginning/end are equal) stages:

  <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>

My (rather optimistic) conversion to @keyframes looks like

  <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>

While this does draw the initial shape, there is no animation. The only browser providing a clue is Firefox which mentions: Unknown property 'd'. Declaration dropped. Unknown property 'd'. Declaration dropped. . This makes sense, though I cannot seem to figure out how to declare a morphing shape without using SMIL.

Obligatory demonstration can be found on Codepen

I'd like to keep the SVG standalone, so javascript is not an option if it can be avoided (as I'm using the SVG as a background image). As tempting as it may seem for this example, I am also trying to avoid using CSS transforms as the SVG I'm converting consist of various shapes morphing together.

链接地址: http://www.djcxy.com/p/18326.html

上一篇: 在画布上显示SVG字符串

下一篇: 将SVG SMIL属性动画转换为CSS