Interactive SMIL Triggers
One of the great things about SMIL is that it can respond to user interaction directly in the markup, without needing a single line of JavaScript.
By using the begin and end attributes, you can trigger animations based on events like click, mouseover, and mouseout.
Event Triggers
To trigger an animation based on a user event, set the begin attribute to the format elementID.eventName. Common events include:
click: Triggers when the user clicks the element.mouseover: Triggers when the mouse enters the element.mouseout: Triggers when the mouse leaves the element.mousedown/mouseup: For even finer control over clicking.
Controlling Duration with end
Just as you can trigger the start of an animation, you can also trigger its end. This is particularly useful for hover effects where you want an animation to stop (or reset) as soon as the user moves their mouse away.
Example: Click and Hover Triggers
Below are two basic interactive examples. The first shows a simple "on" toggle, and the second shows a smooth, organic pulse on hover.
Creating a True "Toggle Off"
You may noticed in the first example above that once you click the toggle "On", you can't click it "Off" again. This is because SMIL doesn't have built-in "state" or logic. To overcome this, we can use a clever trick: Overlayed Triggers.
By placing two invisible buttons (rectangles) on top of each other and alternating their visibility when clicked, we can simulate an "On/Off" state purely in SVG markup.
Example: SMIL True Toggle
This toggle uses two overlapping rectangles to handle both the "On" and "Off" state transitions.
Limitations of Native Interaction
While the trick above is great for simple UI elements, it can quickly become complex if you have dozens of interacting states. This is exactly where JavaScript and libraries like GSAP come in (which we'll cover later in this tutorial).