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>

谢谢大家的帮助。