Can I make a small ball move along the line in the SVG picture in Mango?

[Zhilin Chen]

I want to show the direction of flow of a vector on a line segment. Can I make a small ball move along the line or path in the SVG picture in Mango? Has anyone implemented a similar function like this in ma-SVG?

[Zhilin Chen]

I know something like this can create a ball to move along the path.

</ma-svg>
</div>
<style type="text/css" >
.ball {
 width: 15px;
 height: 5px;
 background-color: red;
 border-radius: 50%;

 offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
 offset-distance: 0%;

 animation: red-ball 2s linear alternate infinite;
}
@keyframes red-ball {
from {
   offset-distance: 0%;
}
 to {
   offset-distance: 100%;
}
}
</style>
<path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
</svg>

<div class="ball"></div>

But what if I want to let the ball move along a path in my SVG (the path is complicated can not write it out as a single Line coordinates)?

And this is what the line looks like.!