使用View Transition API实现SVG元素平滑过渡失效问题咨询

我最近在尝试用View Transition API让SVG元素在两个位置间平滑过渡，给元素加上view-transition-name属性后，HTML元素的过渡效果完全正常，但SVG元素却只有默认的淡入淡出交叉动画，这让我特别困惑。

我做了个小Demo来测试：里面有一个用SVG绘制的圆形，还有一个HTML的方形元素。点击HTML方形的时候，它能平滑地移动到新的位置；但点击SVG圆形时，只会触发默认的交叉淡入淡出效果。两者的配置逻辑几乎完全一致：都是调用document.startViewTransition()方法，然后替换页面上同一个ID的元素。按道理SVG元素也应该能实现这种平滑的位移动画才对，是我在Demo里哪里写错了，还是我对这个API的使用有什么遗漏的点？

我知道可以通过Web Animations API自定义动画来实现SVG的平滑过渡，但我更希望只通过view-transition-name属性就能搞定这个需求。另外要说明的是，这个Demo目前只在基于Chromium的浏览器中可以正常运行。

测试代码 #

HTML

<div id="first">
  <svg 
    id="svg" 
    viewBox="0 0 100 100" 
    style="width: 100px; height: 100px">
        <circle id="icon" cx="50" cy="50" r="40" fill="blue" />
  </svg>
</div>
<div id="second">
  <div id="item"></div>
</div>

CSS

#icon {
  view-transition-name: icon;
}

#second {
  width: 500px;
  height: 500px;
}

#item {
  background-color: green;
  width: 100px;
  height: 100px;
  view-transition-name: item;
}

JavaScript

document.getElementById("svg").addEventListener("click", () => {
  document.startViewTransition(() => {
    // 更新DOM到第二状态
    document.getElementById("svg").innerHTML = `
          <circle id="icon" style="transform: translate(100px, 100px);" r="40" fill="red" />
  `;
  });
});

document.getElementById("second").addEventListener("click", () => {
  document.startViewTransition(() => {
    document.getElementById(
      "second"
    ).innerHTML = `<div id="item" style="width: 200px; height: 200px; background-color: blue; position: absolute; transform: translate(200px, 200px);"></div>`;
  });
});

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