Safari 動態更改路徑數據時不更新 textPath

Question

我有一條從 SVG 中的textPath元素引用的路徑，我正在動態更新路徑數據。 這在 Chrome 和 Firefox 中運行良好，但 Safari (v16.1) 沒有更新textPath以反映更新后的路徑數據。

這是精簡的用例：

 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>

對我來說似乎是一個錯誤，任何解決它的幫助將不勝感激。

Answer 1

我找到了一種解決方法：如果我動態添加href屬性，它將在 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>