Centering moving SVG - css

Question

I've been trying to get this SVG animation of a washing machine, I'm almost there, but CSS is not my strong suit and I can center the moving tumble. Am I missing something obvious?
Thanks!
<svg viewBox="0 0 20 30">
<style>
#keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg);
}
100% {
transform: rotate(1080deg);
}
}
.on_no_delay {
animation: rotate 1.8s linear infinite;
transform-origin: center;
fill: #5daeea;
will-change: transform;
}
</style>
<path fill="#5daeea" d="M15.2,10.45,6.37,1.28h12a2,2,0,0,1,2,2v16a2,2,0,0,1-2,2h-12a2,2,0,0,1-2-2v-16a2,2,0,0,1,2-2m1,2a1,1,0,1,0,1,1,1,1,0,0,0-1-1m3,0a1,1,0,1,0,1,1,1,1,0,0,0-1-1M7,10.51A6,6,0,1,0,15.14,8,6,6,0,0,0,7,10.51Z"/>
<g class="tumble on_no_delay"><path d="M14.83,11.17a4,4,0,1,1-7.66,7.66l5.66-5.66"/></g>
</svg>

Answer 1

If you prepared svg properly, you wouldn't have this problem.
See what svg looks like when opened in a graphics program.
And it should be in this format.
Below the solution:
<svg viewBox="0 0 50 63">
<style>
#keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg);
}
100% {
transform: rotate(1080deg);
}
}
.on_no_delay {
animation: rotate 5s linear infinite;
transform-origin: center 60%;
fill: #5daeea;
will-change: transform;
}
</style>
<path d="M33.844 28.656 6.25 0h37.5C47.179 0 50 2.821 50 6.25v50c0 3.429-2.821 6.25-6.25 6.25H6.25C2.821 62.5 0 59.679 0 56.25v-50C0 2.821 2.821 0 6.25 0m3.125 6.25A3.14 3.14 0 0 0 6.25 9.375 3.14 3.14 0 0 0 9.375 12.5 3.14 3.14 0 0 0 12.5 9.375 3.14 3.14 0 0 0 9.375 6.25m9.375 0a3.14 3.14 0 0 0-3.125 3.125A3.14 3.14 0 0 0 18.75 12.5a3.14 3.14 0 0 0 3.125-3.125A3.14 3.14 0 0 0 18.75 6.25M8.219 28.844a18.745 18.745 0 0 0-2.14 8.698c0 10.286 8.464 18.75 18.75 18.75s18.75-8.464 18.75-18.75A18.774 18.774 0 0 0 33.656 21a18.755 18.755 0 0 0-8.827-2.208 18.772 18.772 0 0 0-16.61 10.052Z" style="fill:#5daeea;" />
<path class="tumble on_no_delay" d="M36.986 25.953a16.932 16.932 0 0 1 4.957 11.969c0 9.285-7.641 16.926-16.926 16.926a16.933 16.933 0 0 1-11.969-4.958l17.688-17.687" />
</svg>