Гибкое центрированное вращение 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

Answer 1

Причина, по которой второе вращение кажется несовершенным, заключается в том, что центр div не является центром круга.

Убедитесь, что svg центрировал div и круг находится в центре svg.