Quarto@revealjs: Trigger SVG animations without using the mouse *into the slide*

[rodrigo-j-goncalves]

Description

I am not an expert in SVG, CSS, or even HTML, so maybe this is a silly question (or maybe not!), bear with me.

I need to show SVG animations in my Quarto-revealjs presentation. The workflow I expect when giving the presentation (with a remote controller only, not touching the computer) would be, from the 1st screen (slide Nr. 1) of my presentation:

1. click with the controller --> slide 2 is shown (normal slide)
2. click with the controller --> slide 3 is shown (slide that contains a SVG animation). The animation doest not start yet.
3. click with the controller --> slide 3, the animation of the SVG starts. Then it ends.
4. click with the controller --> slide 4 is shown

Ideally, if the SVG has more than one animation, I would be able to advance one by one by clicking on the remote controller.

To test this, I made a simple SVG animation test and included it into my Quarto presentation (revealjs). The animation makes the rectangle change color twice, and another one is a moving circle.

My problem is the animation's triggering: It is currently set to begin when the user clicks on the SVG image. This means I have to physically go to the computer, grab the mouse, and click into the rectangle for each animation.
This is a bit cumbersome. Instead, I want to trigger the animation only with the controller (which, I assume, is equivalent to space bar keystroke).

In the SVG code, there are many other options to begin the animation instead of click. I tried almost all of them (including keydown) and I was not able to start the SVG animation with the spacebar or right arrow key, which is what I would normally do during the presentation.

I investigated a bit in other forums and it seems that, if I understood correctly, the problem is that the focus is not on the SVG element of the presentation, but rather controlled by the parent, which I assume is Quarto. I am not sure if I can ask Quarto to transfer the focus to a specific element of the slide (in this case, the SVG) after showing the 'initial slide', or if there is a better way to do it.

So in sum, is there is any way to activate the trigger of a SVG element from the quarto@revealjs presentation, without having to specifically interact with the SVG element? Basically I want to be able to show my quarto presentation from start to end, including animations in SVGs, etc. by only using the remote controller (or, only using the spacebar, or only right arrow key), i.e. without having to grab the mouse and click on the SVG.

Below I include a reproducible example.
Thanks to all the folks in Quarto and Revealjs for making these super tools available for everyone :)

---

This is the qmd file

---
title: "SVG animation test"
format:
  revealjs:
    transition: fade
execute: 
  eval: false
  echo: true
embed-resources: true
---

## This is a test of SVG animation
The next slide shows a SVG file that contains an animation (change of color).

To see the animation, click on the rectangle.

## <!-- Test animated SVG --> Animated SVG: test-click
![SVG](/media/test-click1.svg)

## This is a 2nd test of SVG animation
The next slide shows a SVG file that contains an animation (moving circle).

To see the animation, click on the green circle.

## <!-- Test animated SVG --> Animated SVG: test-click
![SVG](/media/circle-click.svg)

## End

This is test-click1.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg1"
   inkscape:version="1.4 (1:1.4+202410161351+e7c3feb100)"
   sodipodi:docname="test.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:document-units="mm"
     inkscape:zoom="0.28283775"
     inkscape:cx="424.27151"
     inkscape:cy="873.29219"
     inkscape:window-width="1920"
     inkscape:window-height="1138"
     inkscape:window-x="0"
     inkscape:window-y="4"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs1" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
  <rect width="50%" height="50%">
    <animate attributeName="fill" values="blue;red" dur="2s" begin="click" repeatCount="2" />
  </rect>
  </g>
</svg>

And this is circle-click.svg

<svg width="250" height="200">  <circle cx="40" cy="75" r="40" fill="#6ab150">    <animateTransform attributeType="XML" attributeName="transform" type="translate" values="0,0; 63,85; 170,-35; 0,0" begin="click" dur="4s" repeatCount="indefinite"></animateTransform>			  </circle></svg>