svg transform-origin and nested svg

<svg width="500" height="500" viewBox="0 0 500 500">
    <svg x="100" y="100" width="500" height="500" viewBox="0 0 500 500">
        <rect x="0" y="0" width="100" height="100" fill="none" stroke="gold"/>
        <rect x="100" y="100" width="100" height="100" fill="none" stroke="cadetblue"/>
        <rect x="100" y="100" width="100" height="100" fill="none" stroke="cadetblue" transform="rotate(45)"/>
        <rect x="100" y="100" width="100" height="100" fill="none" stroke="maroon" transform="matrix(.7,.7,-.7,.7,150,-60)"/>
<g transform=translate(10,0)>
        <rect x="100" y="100" width="100" height="100" fill="none" stroke="red" transform="translate(150,150) rotate(45) translate(-150,-150)"/>
</g>
     <g transform="translate(20,0)">   <rect x="100" y="100" width="100" height="100" fill="none" stroke="black" transform="rotate(45) " style="transform-box:fill-box;transform-origin:50% 50%;"/></g>
    </svg>
</svg>
<h1>svg-svg-rect  </h1>
<h1>find transform-origin  (cx,cy) and rotate the rectangle by 45 degrees <h1>

svg-svg-rect

find transform-origin (cx,cy) and rotate the rectangle by 45 degrees