SVG背景圖像不在中心旋轉

Question

我正在通過background-image屬性顯示微調器。

正如您在示例中所見，微調器並未從其中心旋轉。

我嘗試使用transform-origin屬性，但它不起作用。

 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>

這是我的 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>

我怎樣才能讓這個微調器從中心旋轉？

感謝幫助。

Answer 1

我終於設法弄明白了。 問題是我沒有像這樣將transform-origin樣式設置為<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;
      /* 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>

最終解決方案：

 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>

謝謝大家的幫助。