SVG -沿动画直线的路径移动圆

Question

我正在尝试做一个简单的动画的圆，它沿着一条线移动，也是动画。

我目前使用的移动圆的方法是使用并仅将起点和终点坐标与直线的起点和终点坐标进行匹配，这是一个手动且耗时的过程。

我还读到SMIL动画被弃用，在未来很少或没有支持。https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

有没有人能建议一种更有效的方法来做这件事？

​

.line {
  stroke: #bfbfbf;
  stroke-width: 1;
  fill: none;
  animation: drawline 2s linear forwards;
  -moz-animation: drawline 2s linear forwards;
  -webkit-animation: drawline 2s linear forwards;
}

@keyframes drawline {
  from {
    stroke-dasharray: 0 400;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: 400 400;
    stroke-dashoffset: 0;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 521.156 545.59">

  <line class="line" id="audit-line" fill="#000" stroke="#bfbfbf" x1="154" y1="238" x2="214" y2="30"></line>
  
  <circle id="audit-circle" r="18" cx="158" cy="238" stroke="#7ac142" fill="#7ac142" />
  <text id="audit-text" font-family="Arial" font-size="13">A</text>
  <text id="audit" class="fade-in delay-2" x="245" y="35" font-size="13" font-family="Arial">Text</text>
  <animate
    xlink:href="#audit-circle"
    attributeName="cx"
    to="214"
    dur="1s"
    fill="freeze" />
  <animate
    xlink:href="#audit-circle"
    attributename="cy"
    to="30"
    dur="1s"
    fill="freeze"
  />
  <animate
    xlink:href="#audit-text"
    attributeName="x"
    from="155"
    to="210"
    dur="1s"
    fill="freeze" />
  <animate
    xlink:href="#audit-text"
    attributename="y"
    from="240"
    to="35"
    dur="1s"
    fill="freeze"
  />

</svg>

​

Answer 1

你可以做得更有效率一点。例如，您不需要单独设置圆及其文本的动画。另外，如果你将CSS和SMIL动画混合在一起，你会把事情搞得很复杂。

​

.line {
  stroke: #bfbfbf;
  stroke-width: 1;
  fill: none;
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 521.156 545.59">

  <line class="line" id="audit-line" fill="#000" stroke="#bfbfbf" x1="154" y1="238" x2="154" y2="238"></line>

  <g id="audit-circle">
    <circle r="18" cx="158" cy="238" stroke="#7ac142" fill="#7ac142" />
    <text x="154" y="242" font-family="Arial" font-size="13">A</text>
  </g>

  <text id="audit" class="fade-in delay-2" x="245" y="35" font-size="13" font-family="Arial">Text</text>

  <animateTransform
    xlink:href="#audit-circle"
    attributeName="transform"
    type="translate" from="0,0" to="56,-208" dur="1s"
                    additive="replace" fill="freeze"/>
  <animate
    xlink:href="#audit-line"
    attributeName="x2"
    from="154"
    to="214"
    dur="1s"
    fill="freeze" />
  <animate
    xlink:href="#audit-line"
    attributename="y2"
    from="238"
    to="30"
    dur="1s"
    fill="freeze"
  />

</svg>

​