Гибкий вращающийся по центру SVG

Question

Мне нужен гибкий вращающийся по центру SVG.

Проблема в том, что при использовании

<svg width="100%">

с вращением окно браузера начинает изменять размер при повороте SVG.

Если я удаляю"width =" 100% "", чем SVG не уменьшит SVG при изменении размера горизонтального окна.

Есть идеи, как это исправить?

Codesandbox пример.

Answer 1

Поместить анимацию в svg - это решение.

    <svg
      viewBox="0 0 29.892 29.892"
      width="100%"
      height="100vh"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
    <g>
      <path
        d="m14.946 0c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-1e-3 -8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634s11.633 5.209 11.633 11.634c0 6.426-5.208 11.634-11.633 11.634z"
        opacity=".2"
      />
      <path d="m20.758 4.878 1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012v3.312c2.119 0 4.1 0.576 5.812 1.566z"/>
        <animateTransform repeatCount="indefinite" begin="0s" dur="5s" attributeName="transform" type="rotate" from="0 14.946 14.946" to="360 14.946 14.946" />
    </g>
    </svg>

Если вы хотите, чтобы css управлял анимацией, вам все равно придется сгруппировать пути в svg.Затем вы можете настроить таргетинг на группу в css, как показано ниже.

#circle {
  animation: rotate 2s linear infinite;
  transform-origin: 50% 50%
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

 <svg
      viewBox="0 0 29.892 29.892"
      width="100%"
      height="100vh"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g id="circle">
        <path
          d="m14.946 0c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-1e-3 -8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634s11.633 5.209 11.633 11.634c0 6.426-5.208 11.634-11.633 11.634z"
          opacity=".2"
        />
        <path d="m20.758 4.878 1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012v3.312c2.119 0 4.1 0.576 5.812 1.566z" />
      </g>
    </svg>