Safari does not update textPath when path data is changed dynamically - svg

Question

I have a path which I'm referencing from a textPath element in SVG, I'm updating the path data dynamically. This works fine in Chrome and Firefox, but Safari (v16.1) is not updating the textPath to reflect the updated path data.
Here is the stripped down use case:
const path = document.querySelector("path");
setInterval(function(){
path.setAttribute("d", `M ${Math.random()*20} ${Math.random()*400} C 11 195 385 105 789 227`)
}, 100);
<svg width="800" height="400" viewBox="0 0 800 400">
<text>
<textPath text-anchor="middle" startOffset="50%" href="#tp-path" font-size="51" font-family="sans-serif">Lorem Ipsum</textPath>
</text>
<path d="M 22 400 C 11 195 385 105 789 227" fill="none" stroke="#ccc" id="tp-path"></path>
</svg>
Seems like a bug to me, any help working around it would be appreciated.

Answer 1

I found one workaround: if I add the href attribute dynamically it will work in Safari:
const path = document.querySelector("path");
const textPath = document.querySelector("textPath");
textPath.setAttribute("href", "#tp-path");
setInterval(function(){
path.setAttribute("d", `M ${Math.random()*20} ${Math.random()*400} C 11 195 385 105 789 227`)
}, 100);
<svg width="800" height="400" viewBox="0 0 800 400">
<text>
<textPath text-anchor="middle" startOffset="50%" font-size="51" font-family="sans-serif">Lorem Ipsum</textPath>
</text>
<path d="M 22 400 C 11 195 385 105 789 227" fill="none" stroke="#ccc" id="tp-path"></path>
</svg>