SVG Interactivity

Last Updated:

SVG Interactivity

SVG allows us to interact with its element by using JavaScript event attributes.

In this example, we will create an interactive SVG circle.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg circle{ stroke:red; stroke-width:3; fill:green; } </style> </head> <body> <svg height="100" width="100"> <script> <![CDATA[ function myFunction() { alert("You clicked"); } ]]> </script> <circle cx="50" cy="50" r="40" onclick="myFunction()"/> </svg> <p><strong>Note</strong>: Click on the circle.</p> </body> </html>

Share this Page

Meet the Author