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.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN43f24BoPbtMHXO43yTGVLd5It0uuER7b9ufHDH78bwZ_GgPPnnBJ6i3LlkeGkZ0Tfb_PqGl1Uc70UxoFDKSDdV7aItuC9hmFCdBzznGPqyc7TDhwUUB63zOSGxxffLlUWeRJahAE_zOP/s1600/illustrator.gif)
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:
No comments:
Post a Comment