html - SVG 动画 - 沿线移动的增大和缩小的圆

Question

我一直在为这个 SVG 问题而烦恼，我确定这是一个属性或我缺少的东西，但无法弄清楚

我基本上想构建一个带有圆圈的自定义加载器，该圆圈从 svg 的左侧开始并移动到右侧，在中间缩放，因此它从小的 0.5 比例开始，然后在中间增加到 3 比例在另一侧缩小到 0.5，然后重复此操作，左右移动

到目前为止，我可以让圆圈从左到右移动，我也可以缩放它，但是当我尝试组合这两个动画时，它到处都是。

https://jsfiddle.net/0odvwna4/18/

 <svg width="800px" height="100px">

   <circle 
     cx="0" 
     cy="50" 
     r="15" 
     fill="blue" 
     stroke="black" 
     stroke-width="1" 
     transform="scale(0.0801245 0.0801245)">

     <animateTransform     
                       attributeName="transform" 
                       type="scale" 
                       begin="0s"
                       calcMode="spline" 
                       keySplines="0.3 0 0.7 1;0.3 0 0.7 1"
                       values="0;1;0" 
                       keyTimes="0;0.5;1"
                       dur="5s"
                       repeatCount="indefinite"></animateTransform>

     <animate 
              attributeName="cx" 
              from="0" 
              to="800" 
              dur="5s" 
              repeatCount="indefinite" 
              />
    </circle>
 </svg>

Answer 1

通过为 cx 属性设置动画，您将更改圆在 SVG 中的位置。由于所有变换的原点都位于 SVG (0,0) 的左上角，因此您的比例会导致圆相对于原点来回移动。

无论如何，为什么要费心进行比例变换呢？为什么不只为半径设置动画？

<svg width="800px" height="100px">

   <circle 
     cx="0" 
     cy="50" 
     r="0" 
     fill="blue" 
     stroke="black" 
     stroke-width="1">

     <animate
             attributeName="r" 
             begin="0s"
             calcMode="spline" 
             keySplines="0.3 0 0.7 1;0.3 0 0.7 1"
             values="0;15;0" 
             keyTimes="0;0.5;1"
             dur="5s"
             repeatCount="indefinite"/>

     <animate 
              attributeName="cx" 
              from="0" 
              to="800" 
              dur="5s" 
              repeatCount="indefinite"/>
    </circle>
 </svg>