此codepen在除Safari之外的每个浏览器中都有效。这并不复杂,但我对SVG和SMIL很新,所以我可能会遗漏一些不受支持的东西?
http://codepen.io/jaminroe/pen/rVoPRp
简化版,只有2种形状:
<svg height="100px" width="100px" viewBox="0 0 50 50" >
<path fill="#4E3BC1" >
<animate
attributeName="d"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1;"
values="M 0 50
c0-12 0-37 0-50 8 0 17 0 25 0 8 0 20 0 25 0 0 13 0 38 0 50-5 0-17 0-25 0-8 0-17 0-25 0
Z;
m 41 50
c-8 0-19 0-27 0-4-5-10-16-14-23 5-9 9-16 14-23 8 0 19 0 27 0 4 8 9 16 14 23-4 8-9 16-14 23
Z;"
/>
<animate
attributeName="fill"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1;"
values="#1eb287;
#1ca69e;"
/>
</path>
</svg>
谢谢!
答案 0 :(得分:4)
删除每个 keySplines 属性末尾的分号。
我也是新手,并且遇到了同样的问题。您可能知道,keyTimes需要比keySplines多一个值(在您的情况下为2个keyTimes和1个keySpline)。你的keySplines属性末尾的分号可能使Safari假设,后面有第二个值,这意味着你现在有2个keyTimes值和2个keySplines值。 这打破了整个动画,没有任何显示。
以下是移除分号的代码段,在Safari中使用。
<svg height="100px" width="100px" viewBox="0 0 50 50" >
<path fill="#4E3BC1" >
<animate
attributeName="d"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1"
values="M 0 50
c0-12 0-37 0-50 8 0 17 0 25 0 8 0 20 0 25 0 0 13 0 38 0 50-5 0-17 0-25 0-8 0-17 0-25 0
Z;
m 41 50
c-8 0-19 0-27 0-4-5-10-16-14-23 5-9 9-16 14-23 8 0 19 0 27 0 4 8 9 16 14 23-4 8-9 16-14 23
Z;"
/>
<animate
attributeName="fill"
dur="1s"
repeatCount="indefinite"
keyTimes="0;
1"
calcMode="spline"
keySplines="0,0,1,1"
values="#1eb287;
#1ca69e;"
/>
</path>
</svg>