svg transform matrix: transform attribute value

<style>
svg {margin:100px;overflow:visible;border:1px solid red;}
</style>

<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  
<path id="path1" d="M100,100 l200,0 l0,100 l-200,0 l0,-100" fill="none" stroke="black" stroke-width="1" />
<path id="path2" d="M100,100 l200,0 l0,100 l-200,0 l0,-100" fill="none" stroke="black" stroke-width="1" transform="translate(200,150)"/>
<path id="path3" d="M100,100 l200,0 l0,100 l-200,0 l0,-100" fill="none" stroke="black" stroke-width="1" transform="translate(200,150) rotate(45)"/>
<path id="path4" d="M100,100 l200,0 l0,100 l-200,0 l0,-100" fill="none" stroke="black" stroke-width="1" transform="translate(200,150) rotate(45) translate(-200,-150)"/>
<path id="path4" d="M100,100 l200,0 l0,100 l-200,0 l0,-100" fill="none" stroke="black" stroke-width="1" transform="translate(200,150) rotate(45) translate(-200,-150)"/>
<circle cx="200" cy="150" r="5" fill="red" stroke="blue" stroke-width=".2"/>
<circle cx="200" cy="150" r="5" fill="red" stroke="blue" stroke-width=".2" transform="translate(200,150)"/>
<circle cx="200" cy="150" r="5" fill="red" stroke="blue" stroke-width=".2" transform="translate(200,150) rotate(45)"/>
<circle cx="200" cy="150" r="5" fill="green" stroke="green" stroke-width=".2" transform="translate(200,150) rotate(45) translate(-200,-150)"/>

<path id="path1-1" d="M100,100 l200,0 l0,100 l-200,0 l0,-100" fill="gold" stroke="black" stroke-width="1" transform="matrix(.7,.7,-.7,.7,0,0)"/>
<path id="path1-1" d="M100,100 l200,0 l0,100 l-200,0 l0,-100" fill="yellow" stroke="black" stroke-width="1" transform="matrix(.7,.7,-.7,.7,165,-95)"/>

<path id="path1" d="M100,100 l200,0 l0,100 l-200,0 l0,-100" fill="maroon" stroke="black" stroke-width="1" transform="translate(165,-95) "/>
<path id="path1" d="M100,100 l200,0 l0,100 l-200,0 l0,-100" fill="maroon" stroke="black" stroke-width="1" transform="translate(165,-95) rotate(45)"/>

</svg>