Looking for animate SVG with CSS

Question

I want animate my SVG icon. Already did it, but I'm missing something. I'm new to animation in CSS.

The problem is that the position of the SVG is not in place when one enters the website. Also, when the SVG does the animation (hover animation), it is as if the dimension of the SVG "div" completely changed and was rescaled again.

How can I put the SVG in its initial "cross" shape and have it rotate on its own axis without losing its main dimensions?

#logo{
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center;
    animation-play-state: paused;
}
    
svg:hover #logo{
    animation-play-state: running;
}

@keyframes spin{
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}

<div class="logo">
  <svg  width="35px" height="35px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
     <g>
        <rect id="logo" x="16.57" y="-4.86" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.2843 20)" width="6.86" height="49.71"/>
     </g>
     <g>
        <rect id="logo" x="-4.86" y="16.57" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.2843 20)" width="49.71" height="6.86"/>
     </g>
   </svg>  
</div>

Answer 1

Mark Edward his answer as the correct one

SVG can be cleaned of all deprecated attributes.

Replace rect with a single path and you can use viewBox and d= path to play with sizes (you can not use %percentage in a path)

I rewrote it a bit to indicate you are not animating the SVG itself; but only one element inside it.

svg {
  background: lightgreen;
  width: 200px;
}

svg path {
  animation: spin 4s linear infinite paused;
  transform-origin: center;
}

svg:hover path {
  animation-play-state: running;
}

@keyframes spin {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
  <rect x="25%" width="50%" y="25%" height="50%" fill="green"/>
  <path d="M4 1v6m3-3h-6" stroke="red"/>
 </svg>

Answer 2

Here is an example. Basically I removed the transform and only worked with width/height and x/y math.

Basically you create a view box to the size you want. I left it as 80 80 as it was a good size bigger than the rectangles width. You can play around with this numbers as you wish. The trick here is then calculating the x and y axis.

x = viewboxX/2 - width/2

y = viewBoxX/2 - width/2

Once if figured that out, then for the second square I just flipped width for height, and x for y, and you got your cross

#logo{
            animation-name: spin;
            animation-duration: 4000ms;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform-origin: center;
            animation-play-state: paused;
            }

            svg:hover #logo{
            animation-play-state: running;}

            @keyframes spin{
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }}

  <div class="logo">
            <svg width="100px" height="100px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="40px" y="40px" viewBox="0 0 80 80" style="enable-background:new 0 0  40 40;" xml:space="preserve">
             <g id="logo">
                <rect x="15.14" y="36.57" width="49.71" height="6.86"/>
                <rect x="36.57" y="15.14" width="6.86" height="49.71"/>
             </g>          
            </svg> 
         </div>