SVG animate标签导致path的d属性动态更新失效问题求助

大家好，我最近碰到一个SVG相关的棘手问题，想请各位帮忙看看：

当我在<path>标签的d属性中使用动态值，同时配合<animate>标签做动画时，d属性的动态更新就会停止生效，具体情况如下：

问题场景 #

我需要动态修改<path>的d属性来实现形状的持续变化，同时又要触发一个用<animate>定义的一次性动画。原本期望动画完成后，d属性的动态更新能继续正常工作，但实际触发动画后，动态修改就不再起作用了。

示例代码 #

下面是我复现问题的完整代码：

HTML部分

<button id="btnStartAnimation">Start</button>
<span class="dvalue"></span>
<svg
  width="200"
  height="100"
  viewBox="0 0 52.916665 26.458333"
  version="1.1">
  
  <path id="elPath" d="m 3.0230713,3.0230713 h 8.6091807 v 3.0887902 l 30.822183,0.3285947 0.06572,-3.4173849 H 50.20927 V 23.855974 H 3.0230713 Z">
  
<animate
  id="animation"
  attributeName="d"
  attributeType="XML"
  dur=".5s"
  fill="freeze"
  begin="indefinite"
  from="m 3.0230713,3.0230713 h 8.6091807 v 3.0887902 l 30.822183,0.3285947 0.06572,-3.4173849 H 50.20927 V 23.855974 H 3.0230713 Z"
  to="m 3.0230713,3.0230713 h 23.2645037 v 3.0887902 l 16.16686,0.3285947 0.06572,-3.4173849 H 50.20927 V 23.855974 H 3.0230713 Z" />
  </path>

</svg>

CSS部分

path {
  stroke: #F00; 
}

JS部分

const elAnimation = document.querySelector("#animation");
const elStartButton = document.querySelector("#btnStartAnimation");
const elPath = document.querySelector("#elPath");
const elSpan = document.querySelector(".dvalue");

elStartButton.addEventListener("click", () => {
  elAnimation.beginElement();
});

let x = 0;

function getDValue(value) {
  return `m 3.0230713,3.0230713 h 8.6091807 v 3.0887902 l 30.822183,0.3285947 0.06572,-3.4173849 H 50.20927 V 23.855974 H ${3.0230713 + x} Z`;
}

function setDValue(value) {
  elPath.setAttribute('d', value);
}

setInterval(() => {
  const newDValue = getDValue(x);
  setDValue(newDValue);
  elSpan.textContent = x;
  x++;
  if (x > 15) x=0;
  
}, 500);

具体现象 #

• 页面加载后，path的左下角顶点会每隔500ms向右移动一段距离，旁边的span会实时显示当前的x值，能看到x一直在0到15之间循环递增；
• 点击Start按钮触发<animate>动画后，path的形状就固定在了动画结束后的状态，不再跟着x值变化，但span里的x值依然正常更新。

尝试过的方案 #

我试过用VueJS和React的响应式绑定来更新d属性，但结果还是一样的，触发animate动画后动态更新就失效了。

期望效果 #

希望触发<animate>动画之后，<path>标签的d属性后续的动态修改依然能正常生效，让形状继续跟着x值变化。

这个问题是在Chrome浏览器中测试发现的，有没有大佬知道这是什么原因，或者有什么解决办法吗？

备注：内容来源于stack exchange，提问作者Fagner Araujo