Invalid DOM property on SVG transform-origin

[oliviertassinari]

Verify canary release

• 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>
  );
}

To Reproduce

Open the console

Describe the Bug

The Next.js App Router gets confused:

Invalid DOM property transform-origin. Did you mean transformOrigin?

Expected Behavior

Like in the Next.js Page Router, no warnings

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

I noticed this while playing with https://mui.com/x/react-charts/lines/#data-format.

[aidev0007]

Hello have you fixed it? I am having the same problem Invalid DOM property transform-origin. Did you mean transformOrigin?

[ajaykumareminence]

i am getting the same error while using @mui/x-charts..

[zfralish]

I am also having this issue with @mui/x-charts

[ZoeLeee]

I am also having this issue with @blueprintjs/icons

[m7kvqbe1]

Also having this issue with components generated using @svgr/cli

transform-origin is a valid SVG HTML attribute:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin

I guess the problem lies with the JSX output from svgr. It should be applying the attribute in camelCase.

This seems to be an issue with next - which is wrongly throwing an error for the transform-origin property.

The React runtime has been happy with it for over a year:

https://github.com/facebook/react/pull/26130/files#diff-67b481b96d526280780f010dfd192761f2d1f6dc812e3015020a7986501d2ebaR524