html - SVG 多边形动画从一些延迟开始，当我希望它像 CSS 关键帧一样快时编辑：脚本导致的减速

Question

我正在使用类似于下面的计时器加载站点，但对于为什么它静态加载然后仅在一秒钟左右后它会开始旋转感到困惑。到那时网站通常会加载，因此即使用户瞥见它的几分之一秒，也希望它被视为正在做某事，就像他们使用 CSS 关键帧启动旋转一样。

<svg class="tri" width="100%" height="100%" viewBox="0 0 100 100">
    	<polygon points="27.6,11.5 94.8,50 27.6,88.5" 
            style="fill:none;stroke:#444;stroke-width:4">
    		<animateTransform attributeName="transform" dur="5"
    			type="rotate"
    			from="0 50 50"
    			to="360 50 50" 
    			repeatCount="indefinite"
    		/>
    	</polygon>
    </svg>

我正在使用 SVG SMIL 动画，因为我也在变形形状，并且与旋转同步的唯一方法是使所有多边形 SMIL 动画。

编辑：确实，在没有任何脚本（包括 Ajax 调用？）的情况下，动画会立即开始。但是，与关键帧不同，Javascript 脚本会导致其启动延迟。这是正常行为吗？有没有办法绕过它？

标签： htmlcsssvgpolygonsvg-animate