I'm making a presentation using xaringan/remark.js. I am including an SVG with two animations that make coloured boxes appear to highlight text. Currently, the animation works on click, but I'd like to start the animation with a 'next slide' event. So the first box should appear with the same key press/scroll/... that you would use to advance a slide. I realise that an easy solution would be just to make three separate SVG files with, respectively, no, one, and two boxes, and than to actually advance slides, but I'd like to know if something like this is at all possible.
A minimal example of my 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>