svg transform : translate, rotate with an example

<style>
svg {margin:100px;overflow:visible;}
</style>

<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs></defs>
  <rect y="100" width="200" height="100" style="stroke: rgb(0, 0, 0); fill: rgb(48, 76, 163);" x="100" transform="rotate(45 200 150)"></rect>
  <rect x="100" y="100" width="200" height="100" style="stroke: rgb(0, 0, 0); fill: rgb(43, 195, 34);"></rect>
  <ellipse style="stroke: rgb(0, 0, 0); fill: rgb(227, 27, 27);" cx="200" cy="150" rx="5" ry="5"></ellipse>
  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%;" d="M 0 150 L 400 150" stroke="red" transform="matrix(1, 0, 0, 1, 0, -0.000047)"></path>
  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-origin: 200px 150px;" d="M 0 150 L 400 150" stroke="red" transform="matrix(0.707107, -0.707107, 0.707107, 0.707107, -0.000003, -0.000006)"></path>
  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); " d="M 200 0 L 200 300" stroke="red" fill="red" transform="matrix(1, 0, 0, 1, -0.000047, 0)"></path>
  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%;" d="M 200 0 L 200 300" stroke="red" fill="red" transform="matrix(0.707107, -0.707107, 0.707107, 0.707107, 0.000002, -0.000008)"></path>
  <rect width="400" height="300" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); fill-opacity: 0.27;"></rect>
  <rect width="400" height="300" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); fill-opacity: 0.27; transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(0.707107, -0.707107, 0.707107, 0.707107, 0.000064, -0.000019)"></rect>
</svg>