CODEWITHSUNDEEP
htmlcsssvg
ZiiMakc
ZiiMakc

Reputation: 37026

Flexible rotating centered SVG

I need flexible rotating centered SVG.

Problem is if use

<svg width="100%">

with rotation, browser window start resizing itself on svg rotation.

If i delete "width="100%"", than SVG will svg will not shrink on horizontal window resize.

Any ideas how to fix it?

Codesandbox example.

Upvotes: 0

Views: 56

Answers (1)

Meursault
Meursault

Reputation: 315

Putting the animation inside the svg is a solution.

    <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>

If you want css to control the animation, you'd still have to group the paths within the svg. You can then target the group in css like below.

#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>

Upvotes: 3

Related Questions