<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <p>You should see no red boxes below</p>
  <svg width="600" height="300" viewBox="0 0 600 300">
    <g style="transform: translate(20px, 20px)">
        <!-- transform-box: border-box -->
        <rect x="-19" y="-19" width="118" height="58" fill="red" />
        <rect style="transform-box: border-box; transform: rotate(90deg) scale(1, 2) translate(30px, -75%); transform-origin: 50% 0;" width="20" height="20" stroke="green" stroke-width="40" fill="green" />
      </g>
      <g style="transform: translate(160px, 10px)">
        <!-- transform-box: view-box -->
        <rect x="-9" y="-9" width="118" height="58" fill="red" />
        <rect style="transform-box: view-box; transform: rotate(90deg) scale(1,2) translate(310px, calc(50% - 35px)); transform-origin: 50% 0;" width="20" height="20" stroke="green" stroke-width="40" fill="green" />
      </g>
      <g style="transform: translate(320px, 20px)">
        <!-- transform-box: stroke-box -->
        <rect x="-19" y="-19" width="118" height="58" fill="red" />
        <rect style="transform-box: stroke-box; transform: rotate(90deg) scale(1, 2) translate(30px, -75%); transform-origin: 50% 0;" width="20" height="20" stroke="green" stroke-width="40" fill="green" />
      </g>
      <g style="transform: translate(10px, 100px)">
        <!-- transform-box: content-box -->
        <rect x="-9" y="-9" width="118" height="58" fill="red" />
        <rect style="transform-box: content-box; transform: rotate(90deg) scale(1, 2) translate(20px, -87.5%); transform-origin: 50% 0;" width="40" height="40" stroke="green" stroke-width="20" fill="green" />
      </g>
      <g style="transform: translate(160px, 100px)">
        <!-- transform-box: fill-box -->
        <rect x="-9" y="-9" width="118" height="58" fill="red" />
        <rect style="transform-box: fill-box; transform: rotate(90deg) scale(1, 2) translate(20px, -87.5%); transform-origin: 50% 0;" width="40" height="40" stroke="green" stroke-width="20" fill="green" />
      </g>
  </svg>
</body>
</html>