Почему два преобразования css matrix3d ​​получают разные результаты?

Question

Я хочу преобразовать SVG из квадрата в трапецию.

Я реализовал преобразование двумя способами со ссылкой на этот сайт . Одним из них является преобразование в теге svg, другим - тег g. При преобразовании с помощью тега svg был получен ожидаемый результат. Однако, когда он был преобразован в теге g, он не мог быть преобразован должным образом.

В чем разница между двумя кодами? Как я могу исправить это, чтобы сделать желаемое преобразование в теге g?

<svg id="transform" width="100" height="100" overflow="visible"
     style="transform-origin: 100px 100px 0px; transform: matrix3d(1.00917, 0, 0, 9.2e-05, 0, 0.908257, 0, -0.000917, 0, 0, 1, 0, 0, 0, 0, 1);">
  <g transform="translate(100,100)">
    <rect x="0" y="0" width="100" height="100" fill="none" stroke="blue"></rect>
  </g>
</svg>

<svg id="transform2" width="100" height="100" overflow="visible">
  <g id="upper"
     style="transform-origin: 100px 100px 0px; transform: matrix3d(1.00917, 0, 0, 9.2e-05, 0, 0.908257, 0, -0.000917, 0, 0, 1, 0, 0, 0, 0, 1);">
    <g transform="translate(100,100)">
      <rect x="0" y="0" width="100" height="100" fill="none" stroke="red"></rect>
    </g>
  </g>
</svg>

Исходный код и демонстрационная версия находятся здесь https://codepen.io/fbkclanna/pen/LYYEPJo.

Я хочу, чтобы красный квадрат был преобразован втак же, как синий квадрат.