SVG animate 启动但未启动

Question

我有一个内部 a ，它在没有启动变量的情况下启动：

<rect height={5} width={5}>
    <animate 
        attributeName="height" 
        from={5} to={10} dur="2s" 
        begin={start ? "0s": "indefinite}/></rect>

该组件位于 SVG 内部，它会重新渲染以更改“start”变量以启动动画。但是，无论我何时选择重新渲染动画，动画都会立即开始。因此，如果我在渲染其所在页面后立即按下它，那么它将正常工作。但是，如果我在 2 秒后重新渲染组件，动画将跳转到最终值。如果我在渲染组件所在页面后 1 秒启动动画，则动画将从中间播放。到底是怎么回事？！

Answer 1

begin和end时间，如果在不引用其他时钟的情况下使用，则始终引用文档的开头。0s因此，您应该使用其他参考，而不是将该值设置为。我想到了几种可能性：从点击或其他事件开始。该begin值采用以下形式<id of event target element>.<event name>：&nbsp;<rect id="grafic" height={5} width={5}>&nbsp; &nbsp;<animate id="animation" attributeName="height"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from={5} to={10} dur="2s" begin="grafic.click"/>&nbsp;</rect>从其他一些代码开始。该begin值保持在indefinite：&nbsp;<rect id="grafic" height={5} width={5}>&nbsp; &nbsp;<animate id="animation" attributeName="height"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from={5} to={10} dur="2s" begin="indefinite"/>&nbsp;</rect>但动画是通过 API 调用启动的：&nbsp;document.getElementById('animation').beginElement();为了获得更像 React 的感觉，请在设置属性时定义“立即”的 wallckock 值：&nbsp;const rightnow = () => new Date().toLocaleTimeString()&nbsp;<rect id="grafic" height={5} width={5}>&nbsp; &nbsp;<animate id="animation" attributeName="height"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; from={5} to={10} dur="2s"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; begin={start ? `wallclock(${rightnow()})` : "indefinite"/>&nbsp;</rect>