svg animation using offset-path not as expected

Question

I am trying to draw a line using stroke-dasharray and stroke-dashoffset which works fine.

Also need a circle mving along with the path.

I have used same path points in offset-path. How ever the circle is not attached to the line.

What could be wrong?

.container, svg{
  display: block;
  margin: auto;
}
@keyframes draw {
0% { stroke-dashoffset: 1250; }
100% {  stroke-dashoffset: 0; }
}

@keyframes ball {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}

svg {

@apply m-auto;
transform-origin: center center;
transform: scale(-1, -1) translateX(40px);
}

.draw {
stroke-dasharray: 1250;
animation: draw 2s infinite;
}

circle {
offset-path: path('M9 315V207C9 179.386 31.3858 157 59 157H894.5C922.114 157 944.5 134.614 944.5 107V8');
offset-distance: 0%;
animation: ball 2s infinite;
}

<div className="container">
            <div class="path">
                <svg width="955" height="325" viewBox="0 0 955 325" fill="none" xmlns="http://www.w3.org/2000/svg">
                
                <path d="M9 315V207C9 179.386 31.3858 157 59 157H894.5C922.114 157 944.5 134.614 944.5 107V8" stroke="#3E9FE3"  class="draw" />
                <circle cx="944.5" cy="7.5" r="7.5" fill="#3E9FE3" />
                </svg>
            </div> 
        </div>

Codepen -- https://codepen.io/felixaj/pen/mdWWJao

Answer 1

It works when I added transform-box: fill-box;