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

Question

我一直在为这个 SVG 问题苦恼，我确定这是一个属性或我遗漏的东西，但无法弄清楚

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

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

 <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

我用 CSS/HTML 完成了 https://jsfiddle.net/5rfgb38y/17/

但是如果你知道我在 SVG 上做错了什么请告诉我，在我弄清楚我遗漏了什么之前它会困扰我

<div id="container">
  <div id="dot"></div>
</div>

  #container {
  width:100%;
  border: 1px solid white;
  height: 100px;
  position: relative;
}

#dot {
  background: white;
  border-radius: 50%;
  height:10px;
  width:10px;
  top:50%;
  animation: mymove 5s infinite;
  position: absolute;
  transform: scale(0.1); 
}

@keyframes mymove {
    from {
      left: 0px;
       transform: scale(0.1);
      }
    50% {
      left: 50%; 
      transform: scale(3);
      }
    to {
      left: 100%;
        transform: scale(0.1);
      }
}

body {
  background: black;
}

Answer 2

通过为 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>

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

SVG animation - growing and shrinking circle moving along line

html

css

svg

svg-animate