Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500">

<!-- Animation with keyboard input = '1' -->
<rect x="5" y="5" width="100" height="100" rx="5" ry="5" style="fill:red">
<animate attributeName="opacity" from="1" to="0" begin="accessKey(1)" dur="3s" fill="restore" />
</rect>

<!-- Animation with keyboard input = '2' -->
<circle cx="150" cy="200" r="30" style="fill:blue">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" begin="accessKey(2)" dur="2s"/>
</circle>

<!-- Animation with keyboard input = '3' -->
<ellipse cx="60" cy="300" rx="50" ry="25" style="fill:green">
<animateColor attributeName="fill" from="green" to="yellow" begin="accessKey(3)" dur="3s" />
</ellipse>

</svg>

In the above examples, the three elements are set to respond to number keys 1, 2, and 3 on your keyboard. Try pressing each of them to see images react accordingly.You can set an element to respond to any number of different keys. Any graphics element is able to generate immediate feedback and animation (such as changing the position on screen, color, opacity, stop colors in a gradient, etc.)