Search code examples
svginteractivesvg-animate

SVG with interaction

I know that animations/transforms can be done in SVG.

I want to do this interactively, e.g. if (in SVG) I show a simple sum "2 + 2 = ?", I want the "?" to be an image over the answer, and when the "?" is clicked/touched it fades to reveal the answer underneath.

This questions shows how animations can be done, so using this as an example :

How to fade in and out color of svg

<svg>
  <rect width="100%" height="100%">
    <animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
  </rect>
</svg>

How can the fades by triggered by clicks on the rectangle?

Solution

  • Just add begin="click" like so...

    <svg>
  <rect width="100%" height="100%">
    <animate attributeName="fill" values="red;blue;red" dur="10s" begin="click" repeatCount="indefinite" />
  </rect>
</svg>