将SVG SMIL属性动画转换为CSS
由于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. Unknown property 'd'. Declaration dropped. 。 这是有道理的，但我似乎无法弄清楚如何在不使用SMIL的情况下声明变形形状。
可以在Codepen上找到必要的演示
我想保持独立的SVG，所以如果可以避免的话，javascript不是一个选项（因为我使用SVG作为背景图像）。 就像这个例子看起来很诱人，我也试图避免使用CSS transforms因为我要转换的SVG包含各种形状一起变形。