Blazor 中的 SVG 动画不一致

Question

我试图在 Blazor 页面中包含一些 SVG 动画，似乎每次运行它时它都会执行不同的操作。

我想知道我是否缺少某些东西来使这项工作可靠。

谢谢。

这是我的测试页面：

@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 的动画在两种浏览器中都更可靠。

Answer 1

有趣。

我可以确认你的结果，浏览器和渲染模式之间存在交互，这是我没想到的。

我可以使用 RenderModes Auto 和 Server 来“修复”Edge 和 Chrome 的问题：

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

我不确定为什么会这样，但 Blazor 将 svg 元素放置在其虚拟 DOM 中，启动和完成加载之间可能存在一些冲突。

在 FireFox 中，旋转工作正常，但垂直动画从不显示。