如何让我的 SVG SMIL 动画再次正确播放？

问题描述

我是一名几乎没有编码经验的设计师，不久前我玩过 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"
           />

解决方法

你可以看看控制台，你就会知道问题出在哪里。根据{{​​3}}，

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" 
          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,75 A1,1 0 0,0 24,75 L34,0 L0,0z "
         style="stroke:#4e2561;
                stroke-width:3;
                fill:#e54e6d"/>
  </g>
    
 </g>
  
</svg>