How to translate an SVG group by a percentage of the viewport

Stick the <g> element in an inner <svg> element and add x and y attributes with percentage values to the inner <svg> element to translate it.

<svg>
  <svg x="10%" y="20%">
    <g transform="scale(1, 1)">
      <rect x="45%" y="25%" height="50%" width="10%"/>
    </g>
  </svg>
</svg>

If you want the scale to apply first you would put the <svg> element inside the <g> instead.