SVG background-image not rotating at center

Question

I'm displaying spinner via background-image property.

As you can see in the example, spinner is not rotating from it's center.

I tried with transform-origin property but it's not working.

 body { background: #5daf47; } .spinner { height: 150px; width: 150px; transform-origin: center center; background-size: 150px; background-image: url('https://dl.dropboxusercontent.com/u/3057457/spinner.svg'); }

 <div class="spinner"></div>

Here is a content of my svg:

<svg x="0px" y="0px" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
  <style>
    svg {
      width: 150px;
      animation: loading 3s linear infinite;
    }

    circle {
      animation: loading-circle 2s linear infinite;
      stroke: white;
      fill: transparent;
      -webkit-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -o-transform-origin: center center;
      transform-origin: center center;
    }

    @keyframes loading {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes loading-circle {
      0% {
        stroke-dashoffset: 0
      }
      100% {
        stroke-dashoffset: -600;
      }
    }
  </style>
  <circle cx="75" cy="75" r="60" stroke-width="4" stroke-dashoffset="0" stroke-dasharray="300" stroke-miterlimit="10" stroke-linecap="round"></circle>
</svg>

How can I make this spinner to rotate from center?

Thanks for help.

Answer 1

I finally managed to figure it out. The problem was that I didn't set transform-origin style to <svg> tag like so:

<svg x="0px" y="0px" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
  <style>
    svg {
      width: 150px;
      animation: loading 3s linear infinite;
      /* INSERTED CODE BELOW IS THE SOLUTION */
      -webkit-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -o-transform-origin: center center;
      transform-origin: center center;
    }

    circle {
      animation: loading-circle 2s linear infinite;
      stroke: white;
      fill: transparent;
      -webkit-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -o-transform-origin: center center;
      transform-origin: center center;
    }

    @keyframes loading {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes loading-circle {
      0% {
        stroke-dashoffset: 0
      }
      100% {
        stroke-dashoffset: -600;
      }
    }
  </style>
  <circle cx="75" cy="75" r="60" stroke-width="4" stroke-dashoffset="0" stroke-dasharray="300" stroke-miterlimit="10" stroke-linecap="round"></circle>
</svg>

Final solution:

 html,body { background: #5daf47; } .spinner { height: 150px; width: 150px; transform-origin: center center; background-size: 150px; background-image: url('https://dl.dropboxusercontent.com/u/3057457/spinner2.svg'); }

 <div class="spinner"></div>

Thanks everybody for help.