Enabling SVG animations

[hknrr]

I’m playing around with making presentations in Obsidian using the Advanced Slides plugin. I’ve really enjoyed using the Excalidraw plugin to make figures, but I want to make some of the diagrams more interactive. I thought about using animated SVGs, so I found an example and transcluded it. The SVG animates correctly in the browser, but not in Obsidian’s preview mode, reading mode, or the preview pane for Advanced Slides. It also didn’t work when I used a <img src="path/to/svg"> where I got the path by inspecting the transcluded element.

I have basically no experience with web development, so I don’t know where to start with this. Is there a way to enable events (onclick, etc) for SVGs? This could make some really cool presentations. If not, are there any other methods/plugins that I could use?

Here’s the code for the SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" width="100" height="100" version="1.1">

    <circle  cx="100" cy="100" r="100" fill="#b2d4e5" >
      <animate
      dur="0.3s" begin="startAnimation.begin" attributeName="r" values="100; 85; 100" fill="freeze"  keyTimes="0; 0.5; 1"  />
      <animate
      dur="0.3s" begin="reverseAnimation.begin" attributeName="r" values="100; 85; 100" fill="freeze"  />
    </circle>

    <!-- vertical line -->
    <path d="M100 50 l0 100" stroke="white" stroke-width="20" stroke-linecap="round" >
      <animate
        dur="0.3s" begin="startAnimation.begin" attributeName="d" values="M100 50 l0 100; M100 100 l0 0; M100 150 l50 -100" fill="freeze"   />
      <animate
        dur="0.3s" begin="reverseAnimation.begin" attributeName="d" values="M100 150 l50 -100; M100 100 l0 0; M100 50 l0 100" fill="freeze" />
    </path>

    <!-- horizontal line -->
    <path d="M50 100 l100 0" stroke="white" stroke-width="20" stroke-linecap="round">
      <animate
        dur="0.3s" begin="startAnimation.begin" attributeName="d" values="M50 100 l100 0; M100 100 l0 0; M50 100 l50 50" fill="freeze" />
        <animate
        dur="0.3s" begin="reverseAnimation.begin" attributeName="d" values=" M50 100 l50 50; M100 100 l0 0; M50 100 l100 0" fill="freeze" />
    </path>
  
    <!--  controls -->
    <!-- these are on top of the visible circle.  Their radius changes depending on which is active
    Opacity is set to 0 so you can't see them-->
    <circle cx="100" cy="100" r="100" fill-opacity="0">
      <animate dur="0.01s" id="startAnimation" attributeName="r" values="100; 0" fill="freeze" begin="click" />
      <animate dur="0.01s" attributeName="r" values="0; 100" fill="freeze" begin="reverseAnimation.end" />
    </circle>
    <circle cx="100" cy="100" r="0" fill-opacity="0">
      <animate dur="0.001s" id="reverseAnimation" attributeName="r" values="100; 0" fill="freeze" begin="click" />
      <animate dur="0.001s" attributeName="r" values="0; 100" begin="startAnimation.end"  fill="freeze"  />
    </circle>
  </svg>