Making an svg image object clickable with onclick, avoiding absolute positioning

Question

I have tried to change the images on my site from img to svg, changing img tags to embed and object tags. Bu

Answer 1

You can have an onclick event in the svg itself, I do this all the time in my work. make a rect over the space of your svg, (so define it last, remember svg uses the painters model)

rect.btn {
  stroke:#fff;
  fill:#fff;
  fill-opacity:0;
  stroke-opacity:0;
}

then as an attribute to the rect add the onclick (this can be done with js or jquery as well).

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
    <circle ... //your img svg
    <rect class="btn" x="0" y="0" width="10" height="10" onclick="alert('click!')" />
  </g>
</svg>
</div>

this will work in most modern browsers, http://caniuse.com/svg ...though if you need cross compatability, you can implement Google Chrome Frame. http://www.google.com/chromeframe