灵活的居中SVG旋转

Question

我试图删除不受支持的animateTransform：

<animateTransform
  attributeType="xml"
  attributeName="transform"
  type="rotate"
  from="0 20 20"
  to="360 20 20"
  dur="1.2s"
  repeatCount="indefinite"
/>

赞成使用CSS：

const LoadingIconCssRotationStyled = styled(LoadingIconCssRotation)`
  border: 1px solid blue;
  max-height: 250px;
  animation: rotate 2s linear infinite;

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;

但是由于某种原因，我的svg开始未在内部批准（蓝色边框），但是还可以。真正的问题是不能真正围绕中心旋转，并且无法调整这个奇怪的浏览器窗口的大小。我该如何解决？

Codesandbox example

Answer 1

第二次旋转似乎不完美的原因是div的中心，而不是圆的中心。

确保svg都位于div的中心，并且圆圈位于svg的中心。