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.!
0_1576303107054_20191214165753.png
