Error when setting class of a <rect> inside <a> inside <svg>

[utkarshkukreti]

Describe the bug

When setting a dynamic class on an SVG Element inside inside like this:

<script>
	let name = 'world';
</script>

<svg>
	<a href="/" aria-label="...">
		<rect class={name} />
	</a>
</svg>

I get this error on Chrome:

Cannot set property className of #<SVGElement> which has only a getter

Reproduction

https://svelte.dev/playground/hello-world?version=5.14.4#H4sIAAAAAAAAE22NQWrDMBBFrzL8TRJw7b0jG7rLHaIuFHmSGqaykSZuivHdixRCN90-3n9_RXBfjBYnFpnoe4oy0J6HUXk4oMJ1FE5ozyv0Z85eBqheq_d5rtPCopldXOL_uJ-CctCEFib5OM7a22BVWCnr1NGu_O6ONpjmzwgmLbeiGkefka-dRWNBLo7uTdyFpbOo69qiSFZNZK_kxaXUrTm9UfPcN64v7eXWo4LyQ9FqvPP2sf0CorvX0gIBAAA=

Logs

Cannot set property className of #<SVGElement> which has only a getter

System Info

Tested in the REPL with:

System:
  OS: macOS 15.0.1
Browsers:
  Brave Browser: 131.1.73.101
  Chrome: 131.0.6778.140
npmPackages:
  svelte: 5.14.4 => 5.14.4

Severity

blocking an upgrade

[utkarshkukreti]

I found a workaround for now:

<svg>
  <svelte:element
    this={"a"}
    {...{ xmlns: 'http://www.w3.org/2000/svg' }}
    href="/"
    aria-label="...">
    <rect class={name} />
  </svelte:element>
</svg>

(xmlns is a spread to suppress TypeScript error)