SVG背景图像不在中心旋转答案

【问题标题】：SVG background-image not rotating at centerSVG背景图像不在中心旋转
【发布时间】：2017-01-24 21:29:53
【问题描述】：

我正在通过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');
}

&lt;div class="spinner"&gt;&lt;/div&gt;

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

如何让这个微调器从中心旋转？

感谢您的帮助。

【问题讨论】：

您使用的是 Firefox 吗？但它适用于 Chrome/IE 吗？
@Robbie 我只在 Chrome 中测试它。没试过 Firefox/IE。
好的 - 问的原因是有一个 Firefox 错误，即使设置了转换原点，如果它不是直接在父级上，Firefox 将围绕 0,0 而不是原点旋转。但因为它不是 Firefox，所以让我看起来...
我认为您可能需要重新考虑它。它在 Firefox 中显示一个绿色框，因此 50% 的观众将看不到任何内容

标签： html css animation svg

【解决方案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');
}

&lt;div class="spinner"&gt;&lt;/div&gt;

感谢大家的帮助。

【讨论】：

供将来参考：此 SVG 微调器在 Chrome/FF 中运行良好。它在 IE 中效果不佳。相反，GIF 微调器应该用于现代浏览器以获得最大的兼容性。
它甚至不显示在 Firefox 中。此外，如果您将类添加到 div，那么您肯定会旋转 div，而不是 svg 背景