Плавный переход элементов SVG с помощью API перехода представления ⇐ CSS

[Anonymous]

У меня следующая проблема: я пытаюсь плавно переместить элементы SVG с помощью API перехода представления из одной позиции в другую, применив имя перехода представления. Хотя это отлично работает для элементов HTML, по какой-то причине к элементам SVG применяется только анимация плавного затухания по умолчанию.
В демо-версии вы видите два элемента: круг, визуализированный с помощью SVG, и квадрат. визуализируется с помощью HTML. При нажатии на кружок SVG применяется анимация по умолчанию — плавное затухание. При нажатии на квадрат HTML выполняется плавный переход. Оба примера имеют более или менее одинаковую конфигурацию: вызывается startViewTransition, элемент заменяется тем же идентификатором, что и раньше. Разве этот плавный переход не должен работать и для элементов SVG, я делаю что-то не так в своей демонстрации или что-то пропустил?
Я знаю, что плавного перехода для SVG можно добиться путем настройки например, анимацию с помощью API веб-анимации, но я бы хотел, чтобы она работала только с именем view-transition-name.
К сожалению, эта демонстрация работает только в Chromium браузеры на базе момент.
Демо — также на CodePen

Код: Выделить всё

document.getElementById("svg").addEventListener("click", () => {
document.startViewTransition(() => {
// Update DOM for the second state
document.getElementById("svg").innerHTML = `

`;
});
});

document.getElementById("second").addEventListener("click", () => {
document.startViewTransition(() => {
document.getElementById(
"second"
).innerHTML = ``;
});
});

Код: Выделить всё

icon {
view-transition-name: icon;
}

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

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

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/793 ... sition-api