Animations display incorrectly on SVGs with a viewbox set

[JakeTrevor]

Describe the bug

I'm trying to animate a list of SVG elements; fly in works fine, but when I start inserting into the middle of the list it's completely wrong - the animation starts from the top of the whole list, rather than the previous position.

For now, I have gotten around this by simply not specifying a view box - I have no idea why this makes a difference, but it does. This is quite annoying however as I cannot size my SVGs properly - advice on further work arounds would also be appreciated.

Reproduction

A minimal example on svelte playground here:
https://svelte.dev/repl/31c7bc6e76324c3c8ea013d5fd62e78a?version=4.0.0

Logs

No logs, nothing technically goes wrong.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
    Memory: 5.30 GB / 15.93 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.5.1 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Spartan (44.22621.1848.0), Chromium (114.0.1823.58)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: ^3.55.0 => 3.59.2

Severity

annoyance