SVG - Move a circle along a path of an animated straight line

Question

I am trying to do a simple animation of a circle that moves along with a line that is also being animated.

My current method for moving the circle is using and just matching the to and from coordinates with the start and end coordinates of the line, it's a manual and time consuming process.

I was also reading that the SMIL animation is deprecated with little or no support in the future. https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

Can anyone suggest a more efficient way of doing this?

.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

You can do it a little more efficiently. For example, you don't need to animate the circle and its text independently. Also, IMO you are making things complicated for yourself by mixing CSS and SMIL animation.

.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>