使用视图转换 API 平滑转换 SVG 元素

Question

我遇到以下问题：我尝试通过应用

view-transition-name

使用视图转换 API 将 SVG 元素从一个位置平滑地移动到另一个位置。虽然这对于 HTML 元素来说非常有效，但由于某种原因，只有默认的交叉淡入淡出动画应用于 SVG 元素。

在演示中，您可以看到两个元素：用 SVG 渲染的圆形和用 HTML 渲染的正方形。单击 SVG 圆圈时，将应用默认动画（交叉淡入淡出）。单击 HTML 方块时，会执行平滑过渡。两个示例都有或多或少相同的配置：调用

startViewTransition

，元素被替换为与之前相同的 ID。这种平滑过渡不应该也适用于 SVG 元素吗？我在演示中做错了什么还是错过了什么？

我知道 SVG 的平滑过渡可以通过使用 Web 动画 API 自定义动画来实现，但我希望仅与

view-transition-name

一起使用。

不幸的是，这个演示目前仅适用于基于 Chromium 的浏览器。

演示 - 也在 CodeSandbox

document.getElementById("svg").addEventListener("click", () => {
  document.startViewTransition(() => {
    // Update DOM for the second state
    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>`;
  });
});

icon {
  view-transition-name: icon;
}

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

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

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

Answer 1

当使用 Chrome DevTools 检查过渡时，我可以看到没有

::view-transition-group(icon)

。这意味着该元素不会作为快照过程的一部分被捕获。

原因是 SVG 元素是 Embedded Content。因此，捕获过程捕获 SVG 作为一个整体，而不查看其内容。

您看到交叉淡入淡出的原因是因为捕获了

:root

元素：SVG 是

root

快照的一部分，默认情况下通过用户代理样式表设置。