SVG animation in Blazor is inconsistent

Question

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.

Answer 1

With SMIL you must escape minus signs if you use them in id values. So the correct syntax for the begin attribute is:

<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>

Alternatively just don't use - signs in id attributes.

The reason is that a - sign is supposed to indicate a time offset e.g. foo - 1s so you have to tell the parser you're not doing that.

...To parse an individual item in a value-list, the following approach defines the correct interpretation. In addition, Id-values and Event-symbols are XML NMTOKEN values and as such are allowed to contain the full stop '.' and hyphen-minus '-' characters. The reverse solidus character '' must be used to escape these characters within Id-values and Event-symbols, otherwise these characters will be interpreted as the full stop separator and hyphen-minus sign, respectively...

Answer 2

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.