svg elements transform-box:fill-box ; transform-origin:50% 50% ;

<svg viewBox="0 0 500 500" width="500px" height="500px">
<style>
svg {border:1px solid black;}
svg * {transform-box:fill-box;transform-origin: 50% 50%;}

</style>

<g>
<rect id="rect1" class="shape" x="100" y="100" width="100" height="100" fill="gold" stroke="blue" transform="rotate(45)">

</animateTransform><animateTransform attributeName="transform" type="translate" values="0;100" begin="0" dur="3s" additive="sum" fill="freeze" repeatCount="indefinite"></animateTransform></rect>
</g>

<g>
<circle id="circle1" class="shape" r="5" cx="150" cy="150" fill="red" stroke="none"></circle>
</g>


<script>
var rect1=document.querySelector('#rect1');
var anim1=document.createElementNS('http://www.w3.org/2000/svg','animateTransform');
anim1.setAttribute('attributeName',"transform");
anim1.setAttribute('type',"rotate");
anim1.setAttribute('values',"0;360;-360;");

anim1.setAttribute('begin',"0");
anim1.setAttribute('dur',"3s");

anim1.setAttribute('additive',"sum");
anim1.setAttribute('fill',"freeze");
anim1.setAttribute('repeatCount',"indefinite");
rect1.appendChild(anim1);

</script>


</svg>