Centering moving SVG-CodePudding

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 ><path d="M14.83,11.17a4,4,0,1,1-7.66,7.66l5.66-5.66"/></g>
</svg>

CodePudding user response：

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