svg - 在 xaringan/remarkjs 中的“下一张幻灯片”事件中为 SVG 设置动画

Question

我正在使用 xaringan/remark.js 进行演示。我包括一个带有两个动画的 SVG，这些动画使彩色框看起来突出显示文本。目前，动画在点击时起作用，但我想用“下一张幻灯片”事件开始动画。因此，第一个框应该出现与您用于推进幻灯片的相同按键/滚动/...。我意识到一个简单的解决方案是制作三个单独的 SVG 文件，分别使用 no、一个和两个框，而不是实际推进幻灯片，但我想知道这样的事情是否可能。

我的 SVG 的一个最小示例：

<svg
  version="1.1"
  baseProfile="full"
  width="110" height="30"
  xmlns="http://www.w3.org/2000/svg">
  
  <rect x="5" y="5" width="100" height="20" rx="4" ry="4" fill="none" stroke="black" />
  
  <text dominant-baseline="central" font-size="11px">
    <tspan x="10" y="14.5">Highlight on click</tspan>
  </text>
  
  <rect id="redbox" x="0" y="0" width="110" height="30" rx="4" ry="4" style="fill:red;stroke:none;fill-opacity:0" />
  
  <animate xlink:href="#redbox" attributeType="CSS" attributeName="fill-opacity" 
           from="0" to="0.5" dur="1s" begin="click" fill="freeze"/>
</svg>