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>

最终解决方案：

＆＃13;

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');
}

＆＃13;

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

＆＃13;

感谢大家的帮助。

SVG背景图像不在中心旋转

1 个答案: