SVG animation in Blazor is inconsistent

I am trying to include some SVG animation in a Blazor page and it seems that it does different things each time I run it.

I would like to know if there is something I am missing to make this work reliably.

Thanks.

Here is my test page:

@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 {}

I have tried testing it with both MS Edge and Firefox and they both give varying results:

• both animations work as expected
• only one animation works
• the end effect of the rotation works but is not animated
• no animation at all

I have found that, at least for rotation, CSS-based animation is more reliable in both browsers.