Transition <line> x1, y1, etc. attributes in SVG using CSS - css

Question

I have an inline SVG in a svelte component that contains some <line>s which change their x1, x2, y1 and y2 attributes based on state. I want to transition between the changes with CSS but it just jumps to the new state instead of transitioning. I would like if there's a native solution with CSS but I can also use svelte transitions.
<button aria-pressed={active} on:click={toggleActive} {...$$restProps}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
{#if active}
<line x1="10" y1="10" x2="20" y2="20" />
<line x1="10" y1="30" x2="30" y2="10" />
<line x1="20" y1="20" x2="30" y2="30" />
{:else}
<line x1="5" y1="10" x2="35" y2="10" />
<line x1="5" y1="20" x2="35" y2="20" />
<line x1="5" y1="30" x2="35" y2="30" />
{/if}
</svg>
</button>
svg line {
stroke: black;
stroke-width: 5;
transition-property: x1, x2, y1, y2, all;
transition-duration: 5s;
}
I have tried using style attribute to set the coordinates based on this answer and that didn't work either.

Answer 1

Even if the attributes could be transitioned, this would not work because the attributes are not changed: The previous elements are discarded and fully replaced.
One thing you could do is use tweened stores, though there are probably better methods. E.g.
<script>
import { cubicOut } from 'svelte/easing';
import { tweened } from 'svelte/motion';
let active = false;
const stateActive = [10, 10, 20, 20, 10, 30, 30, 10, 20, 20, 30, 30];
const stateInactive = [5, 10, 35, 10, 5, 20, 35, 20, 5, 30, 35, 30];
const anim = stateInactive.map(v => tweened(v));
const [v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12] = anim;
$: anim.forEach((store, i) => store.set(
(active ? stateActive : stateInactive)[i],
{ duration: 500, easing: cubicOut }
));
</script>
<button aria-pressed={active} on:click={() => active = !active}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<line x1={$v1} y1={$v2} x2={$v3} y2={$v4} />
<line x1={$v5} y1={$v6} x2={$v7} y2={$v8} />
<line x1={$v9} y1={$v10} x2={$v11} y2={$v12} />
</svg>
</button>
REPL

Answer 2

When conditionally setting d= on the same path element the transition seems to be working in Chrome(109) and Firefox(110) but not in Safari (16). The mentioned d: path() in the comments doesn't seem to be supported yet caniuse Not sure if that's what's relevant in this case.
REPL
<script>
let active = true
</script>
<button on:click={() => active = !active}>
toggle
</button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<path d="{active ? 'M10 10 L20 20' : 'M5 10 L35 10'}" />
<path d="{active ? 'M10 30 L30 10' : 'M5 20 L35 20'}" />
<path d="{active ? 'M20 20 L30 30' : 'M5 30 L35 30'}" />
</svg>
<style>
svg {
width: 200px;
}
path {
stroke: black;
stroke-width: 5;
transition: all 400ms;
}
</style>