将SVG SMIL属性动画转换为CSS

由于SVG SMIL动画被弃用，我尝试将一些形状变形动画转换为CSS3关键帧动画。大多数转换都是直接进行的，除了我使用path属性

d=

的转换

例如，此SVG在3个（实际上是4个，但开始/结束是相等的）阶段之间变形：

虽然这会绘制初始形状，但没有动画。唯一提供线索的浏览器是Firefox，它提到：

未知属性“d”。声明已删除。

。这是有道理的，尽管我似乎不知道如何在不使用SMIL的情况下声明变形形状

强制性示范

我希望SVG保持独立，因此如果可以避免的话，javascript不是一个选项（因为我将SVG用作背景图像）。

---

虽然这个例子看起来很吸引人，但我也试图避免使用

CSS转换

，因为我正在转换的SVG由各种形状一起变形而成。

，至少现在还没有。有一些js库可以在不支持或不支持SMIL的浏览器中实现SMIL。此外，CSS无法设置

d

属性的动画，请参见。其中@ErikDahlström指出“SVG2尚未生成x1、x2、y1、y2表示属性，请参阅”<代码>d也不是。我知道SMIL仍然在规范中，只是Chrome（从v45开始）有一个控制台警告

SVG的SMIL动画（，等等）被弃用并将被删除。请改用CSS动画或Web动画。

这正是促使我将SMIL动画转换为CSS3的原因，CSS3适用于大多数转换或添加一点javascript，虽然这在SVG作为背景图像的用例中显然不起作用。我甚至不知道webkit在背景图像中支持SMIL和css动画，但FF不。。。对于chrome对SMIL的反对，只有他们一个人在那里（除了Blink，但因为他们仍然不支持它），其他浏览器继续支持和开发它。而且，CSS永远无法取代SMIL，不幸的是，仍然没有真正的工具能够像SMIL那样进行路径转换，也许你可以试试gif？（开玩笑）现在我只接受SMIL版本，如果它真的被Chrome团队弃用，我会确保它呈现ok（无论如何都要这样做，因为IE根本不支持它）。Firefox的有趣之处在于，其中一个动画确实可以工作，但其他动画却不能工作，我们还没有弄清楚为什么会这样，在这一点上，这并不重要。谢谢你的评论！如果图像背景不是你唯一的使用案例，那么你一定要试试哪个是为IE设计的，哪个是Blink推荐的

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

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