SVG-анимация в Blazor непоследовательна

Я пытаюсь включить SVG-анимацию на страницу Blazor, и кажется, что каждый раз, когда я ее запускаю, она делает разные вещи.

Я хотел бы знать, есть ли что-то, чего мне не хватает, чтобы эта работа работала надежно.

Спасибо.

Вот моя тестовая страница:

@page "/animation"
@rendermode InteractiveServer

<h3>Animation</h3>

<svg width = "1000" height = "1000" xmlns = "http://www.w3.org/2000/svg">
    <rect width = "30" height = "50" x = "10" y = "10" fill = "blue">
        <animateTransform id = "rect-rot-1"
                          attributeName = "transform"
                          begin = "0s"
                          dur = "5s"
                          type = "rotate"
                          from = "0 25 35"
                          to = "90 25 35" fill = "freeze" />
        <animateTransform id = "rect-tran-1"
                          attributeName = "transform"
                          begin = "rect-rot-1.end + 1s"
                          dur = "5s"
                          type = "translate"
                          additive = "sum"
                          from = "0 0"
                          to = "200 0" />
    </rect>

</svg>

<p />

@code {
}

Я пробовал протестировать его как с MS Edge, так и с Firefox, и оба они дали разные результаты:

• обе анимации работают как положено
• работает только одна анимация
• конечный эффект вращения работает, но не анимируется
• вообще нет анимации

Я обнаружил, что, по крайней мере при вращении, анимация на основе CSS более надежна в обоих браузерах.