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

 <rect id="grafic" height={5} width={5}>

   <animate id="animation" attributeName="height"

            from={5} to={10} dur="2s" begin="grafic.click"/>

 </rect>

从其他一些代码开始。该begin值保持在indefinite：

 <rect id="grafic" height={5} width={5}>

   <animate id="animation" attributeName="height"

            from={5} to={10} dur="2s" begin="indefinite"/>

 </rect>

但动画是通过 API 调用启动的：

 document.getElementById('animation').beginElement();

为了获得更像 React 的感觉，请在设置属性时定义“立即”的 wallckock 值：

 const rightnow = () => new Date().toLocaleTimeString()

 <rect id="grafic" height={5} width={5}>

   <animate id="animation" attributeName="height"

            from={5} to={10} dur="2s"

            begin={start ? `wallclock(${rightnow()})` : "indefinite"/>

 </rect>