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动画-沿线移动的成长和收缩圆圈

2 个答案: