Анимация на SVG не работает в Firefox и Safari ⇐ Html

[Anonymous]

У меня есть переходная анимация, которую я хочу запустить ширину элемента SVG внутри группы. Анимация, кажется, работает только в браузере Chrome.















< /code>

.grow {
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 3s;
width: 10px;
}
< /code>

(() => {
setTimeout(() => {
const rect1 = document.getElementById('rect-1');
rect1.classList.add('grow');

const rect2 = document.getElementById('rect-2');
rect2.classList.add('grow');
}, 1000);
})();
< /code>

, чтобы воспроизвести открыть эту скрипку в Safari или Firefox.
Вы увидите, что переход второго прямоугольника не работает должным образом. < /p>

Есть ли какой -либо обходной процесс, чтобы получить переходной анимацию для конкретного элемента внутри группы SVG?>

Подробнее здесь: https://stackoverflow.com/questions/600 ... fox-safari