Invalid DOM property on SVG `transform-origin`

oliviertassinari commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 18.14.2
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13-canary.6
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/jolly-zhukovsky-7k74qp?file=/app/page.tsx:9,18

import * as React from "react";

export default function BasicLineChart() {
  return (
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <rect x="0" y="0" width="300" height="300" fill="white" />
      <g transform="scale(-1, 1)" transform-origin="center">
        <rect
          x="50%"
          y="35"
          width="39"
          height="30"
          fill="#007BA4"
          transform="scale(1, 1)"
          transform-origin="center"
        />
        <text
          x="50%"
          y="35"
          transform="translate(19.5, 15) scale(-1, 1)"
          transform-origin="center"
          text-anchor="middle"
          dy="4"
          fill="white"
        >
          -13
        </text>
      </g>
    </svg>
  );
}