Html SVG背景图像未在中心旋转

我正在通过

背景图像
属性显示微调器

正如您在示例中看到的，微调器没有从其中心旋转

我尝试了
转换原点
属性，但它不起作用


正文{
背景#5daf47；
}
斯宾纳先生{
高度：150像素；
宽度：150px；
变换原点：中心；
背景尺寸：150px；
背景图像：url（'https://dl.dropboxusercontent.com/u/3057457/spinner.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>

您正在使用Firefox吗？但是它在Chrome/IE中工作？@Robbie我只在Chrome中测试它。没有尝试Firefox/IE.Ok-询问的原因是存在一个Firefox错误，即使设置了transform origin，如果它不直接在父级上，Firefox将围绕0,0旋转，而不是旋转原点。但因为它不是Firefox，所以让我看起来不那么好看……我想你可能需要重新考虑一下。它在firefox中显示了一个绿色框，因此50%的观众将无法看到任何东西供将来参考：这个SVG微调器在Chrome/FF中运行良好。它在IE中不能很好地工作。相反，GIF微调器应该用于现代浏览器以获得最大的兼容性。它甚至在Firefox中都没有显示。另外，如果将类添加到div，那么肯定是在旋转div，而不是svg背景