我怎样才能使我的SVG SMIL动画播放正确吗?

Question

我是一个没有多少编码经验的设计师，不久前我玩了一下SMIL动画，我记得有些浏览器不支持特定的命令。现在我想检查一下我的动画，不幸的是，我注意到我最初成功测试动画的浏览器(opera)也停止正确播放我的动画。这个蓝色的球曾经在y轴上上下移动，这个动画现在不再工作了。

你们知道为什么这个动画在codepen中不能正确播放了吗?我怎么才能看到以前的动画?

https://codepen.io/clemse/pen/gOYPNJZ

这是不工作的部分:

<!-- Animating the ball along the Y Axis, with specific y coordinate values relative to time, with speed dependent on bezier curve -->
<animate
attributeName="cy"
begin="0.2s"
dur="1.6s"
values="142;10;-5;142;142"
keySplines="
0.1 0.9 1.0 1.0; 
1.0 1.0 1.0 1.0; 
0.5 1.6 0.1 0.9;
0.1 0.9 1.0 1.6;" 
keyTimes="
0;0.20;0.40;0.8;1" 
calcMode="spline"
repeatCount="indefinite"
/>

Answer 1

您可以查看控制台，您将看到问题出在哪里。根据keySplines的规格，

x1 y1 x2 y2的取值必须在0到1的范围内

您的示例有两个1.6值。我已将它们更改为0.6，它在我的浏览器(Chrome)中工作。

<svg style="display:block; margin: 0 auto;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="0 0 300 300">
<!-- Background shape--> 
<rect x="0" y="0" width="300" height="300" fill="#FCCE01 "/>
<!-- Opening the Group for the Toy-->
<g>

<!-- Animating the balls impact on the toyvertically-->  
<animateTransform
attributeName="transform"
type="translate"
values="0,0;0,8;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0" 
begin="1.0s" 
dur="1.6"
repeatCount="indefinite"
/>

<!-- Positioning the toy-->
<g transform="translate(-65,34)">  

<!-- Ball shape-->
<ellipse cx="217" cy="30" rx="15" ry="15"
fill="#65c8d2"
stroke="#4e2561" 
stroke-width="3">
<!-- Animating the ball along the Y Axis, with specific y coordinate values relative to time, with speed dependent on bezier curve -->
<animate
attributeName="cy"
begin="0.2s"
dur="1.6s"
values="142;10;-5;142;142"
keySplines="0.1 0.9 1.0 1.0;1.0 1.0 1.0 1.0;0.5 0.6 0.1 0.9;0.1 0.9 1.0 0.6" 
keyTimes="0;0.20;0.40;0.8;1" 
calcMode="spline"
repeatCount="indefinite"
/>

<!-- Animating the balls shape (squashing) along the x axis-->    
<animate 
attributeName="rx"
values="15; 10.5 ; 17 ; 19 ; 15 ; 10.5 ; 17 ; 15 ; 15 ; 15 ; 15"
begin="0.2s"
dur="1.6s"
repeatCount="indefinite"
/>

<!-- Closing the object so only the ball gets animated-->
</ellipse>

<!-- Positioning the trigger-->
<g transform="translate(200,150)"> 
<!-- Drawing the trigger-->
<path d="M0,0 L-14,0 Q-15,20 3,25 L0,0z "
style="stroke:#4e2561;
stroke-width:3;
fill:#e54e6d">

<!--Animating the triggers rotation-->
<animateTransform
attributeName="transform"
type="rotate"
values="0 0 0; -30 0 0; 0 0 0; 0 0 0 ; 0 0 0 ; 0 0 0; 0 0 0 ; 0 0 0 ; 0 0 0 ; 0 0 0 "
begin="0s"
dur="1.6s"
fill="freeze" 
repeatCount="indefinite"
/>    

</path>

</g>

<!--Positioning the cage-->
<g transform="translate(200,150)">
<!--Drawing the cage-->
<path d="M0,0 L-18,-52 L52,-52 L34,0 L10,0 L2,-52   M30,-52 L24,0 M-5,-17 L40,-17 M45,-34 L-12,-34"
style="stroke:#4e2561;
stroke-width:3;
fill:none"/>
</g>

<!--Positioning the Cone-->  
<g transform="translate(200,150)">

<!--Drawing the Cone-->      
<path d="M0,0 L10,75 A1,1 0 0,0 24,75 L34,0 L0,0z "
style="stroke:#4e2561;
stroke-width:3;
fill:#e54e6d"/>
</g>

</g>

</svg>