I have one SVG that is rotate around a svg but is not fixed

问题

 <!--BG Photo-->

   <div class="pic1"><img src="1.svg"></div>

   <!--SVG that will rotate-->

    <div class="pic2"><img src="img/vec/gz4.svg" alt=""></div>


.pic1 img{/*Bg Photo*/

   width: 100%;

   height: auto;

   top: 0;

   left: 0;

}
.pic2{

   position: absolute;

   transform: translate(45px,-75px);

}

.pic2 img{

    transform-origin:center;

    width: 50px;

    height: 50px;

    animation: rotation 2s infinite linear;

}

@keyframes rotation {

    from {

      transform: rotate(0deg);
    }

    to {

      transform: rotate(359deg);

    }

  }

The problem is what when i zoon out/in or resize the brower .pic2

is moving not stay fixed on his original point

来源：https://stackoverflow.com/questions/61685606/i-have-one-svg-that-is-rotate-around-a-svg-but-is-not-fixed