Its not an easy task to locate elements within the markup. Luckily, Adobe Illustrator comes to the rescue:
- Within Illustrator, its very easy to use the direct selection tool to select the required element. It is automatically marked in the Layers window.
- Give the layer a name. This name later becomes the element ID in the SVG markup.
- Be carefull not to use the same names for multiple layers. While Illustrator doesn't really care, your HTML / JavaScript are much less forgiving...
- Use the "Save Aa" command to save your file as SVG.
- If you open your SVG in a text editor - you will notice that layer names are now element IDs within your SVG markup.
All you need to do now is select your element by its ID in order to assign a JavaScript interaction to it.
In this example, I wanted the sun in the picture to be clickable so I gave its layer the name "sun".
After exporting to SVG, all that remain is:
document.getElementById("sun").onclick = function(){
alert("You clicked the sun!");
};
Give it a try - click the sun:
