SVGs with animateTransform lag for an extremely long time when embedded #11681
Description
Describe the bug
SVG elements inline inside svelte files with will lag a lot before starting. Reproduced locally in dev, with build and in production website, on win10 and linux
Reproduction
https://svelte.dev/repl/a58a0871b908479fb265ea7e10b17f84?version=4.2.17
<script>
let name = 'world';
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="m8 16v-16" fill="none" stroke="#EAB308">
<animateTransform
attributeName="transform"
type="rotate"
from="0 8 8"
to="360 8 8"
dur="12s"
repeatCount="indefinite" />
</path>
</svg>
<h1>Hello {name}!</h1>Logs
N/ASystem Info
System:
OS: Windows 10 10.0.19045
CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700K @ 3.60GHz
Memory: 18.53 GB / 31.87 GB
Binaries:
Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.14.1 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Chromium (123.0.2420.97)
Internet Explorer: 11.0.19041.4355Severity
annoyance