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.

Solution

Interesting.

I can confirm your results, there is an interplay with Browsers and RenderModes I didn't expect.

I can "fix" it for Edge & Chrome with RenderModes Auto and Server:

<animateTransform id="rect-rot-1"
                  attributeName="transform"
                  begin="0.01s"
                  ...

I'm not sure why this works but Blazor places the svg elements in its virtual DOM, there may be some conflict between starting and complete-loading.

In FireFox the rotation works Ok but the vertical animation never shows.