Safari v16.1中动态修改path数据后textPath未更新的问题求助

使用SVG的textPath元素引用路径后，动态修改对应path的d属性时，Chrome和Firefox能正常同步更新文本路径，但Safari 16.1中textPath不会反映路径的最新变化。

测试代码如下：

HTML #

<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>

JavaScript #

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);

以下几种方法可解决Safari的这个渲染bug：

方案1：重新设置textPath的href属性 #

每次修改路径后，重新赋值textPath的href属性，强制Safari重新计算文本布局：

const path = document.querySelector("path");
const textPath = document.querySelector("textPath");
setInterval(function(){
  path.setAttribute("d", `M ${Math.random()*20} ${Math.random()*400} C 11 195 385 105 789 227`);
  // 重新绑定href触发更新
  textPath.setAttribute("href", "#tp-path");
}, 100);

方案2：使用路径段API修改路径 #

不直接修改d属性，而是通过SVGPathElement的pathSegList API操作路径段，这种方式更贴近SVG的内部渲染逻辑：

const path = document.querySelector("path");
setInterval(function(){
  const x = Math.random()*20;
  const y = Math.random()*400;
  // 清空旧路径段
  while (path.pathSegList.length > 0) {
    path.pathSegList.removeItem(0);
  }
  // 添加新路径段
  path.pathSegList.appendItem(path.createSVGPathSegMovetoAbs(x, y));
  path.pathSegList.appendItem(path.createSVGPathSegCurvetoCubicAbs(11, 195, 385, 105, 789, 227));
}, 100);

方案3：临时修改路径ID（备选） #

如果前两种方案无效，可临时修改路径ID并重新绑定，强制Safari刷新关联：

const path = document.querySelector("path");
const textPath = document.querySelector("textPath");
const originalId = path.id;
setInterval(function(){
  path.setAttribute("d", `M ${Math.random()*20} ${Math.random()*400} C 11 195 385 105 789 227`);
  // 临时切换ID触发更新
  path.id = "temp-" + originalId;
  textPath.setAttribute("href", "#" + path.id);
  path.id = originalId;
  textPath.setAttribute("href", "#" + originalId);
}, 100);

这些方案的核心都是触发Safari重新计算textPath与路径的关联，解决其未监听d属性变化的bug。

内容的提问来源于stack exchange，提问作者methodofaction