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  But  implementing the onclick function  which previously was contained in the img tag  is proving most difficult   I found onclick had no effect when placed inside the object or embed tag   So  I made a div exclusively for the svg  and placed onclick in this div tag   But  no effect unless visitor clicks on the edges padding of the image   I have read about overlaying a div  but am trying to avoid using absolute positioning  or specifying position at all   Is there another way to apply onclick to a svg   Has anyone encountered this problem  Questions and suggestions are welcome

User · Answer

Have you looked into using the CSS z-index property to make the container dev be  on top  of the svg  Because the div is  presumably  transparent  you will still see the image exactly as before   This  I believe  is the best-practice  non-hack  intended way of solving your problem  z-index is only useful for elements that have a position property of fixed  relative  or  as you ve heard  absolute  However  you don t actually have to move the object   For example    lt style gt       svgwrapper           position  relative          z-index  1         lt  style gt   lt div class  svgwrapper  onClick  function     gt       lt object src  blah    gt   lt  div gt    For what it s worth  it would also be a little more elegant and safe to not use onClick at all  but instead to bind the click event using javascript  That s another issue altogether  though

User · Answer

I wrapped the  svg  tag in  a  tag and put the onClick event in the  a  tag

User · Answer

Click on SVG s  lt g gt  element in  lt object gt  with click event  Works 100   Take a look on the nested javascript in  lt svg gt   Don t forget to insert window parent location href  if you want to redirect the parent page   https   www tutorialspoint com svg svg interactivity htm

User · Answer

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     lt div gt   lt svg xmlns  http   www w3 org 2000 svg  version  1 1  gt     lt g gt       lt circle       your img svg      lt rect class  btn  x  0  y  0  width  10  height  10  onclick  alert  click       gt     lt  g gt   lt  svg gt   lt  div gt    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

User · Answer

I got this working accross the latest versions of Firefox  Chrome  Safari and Opera   It relies on a transparent div before the object that has absolute position and set width and height so it covers the object tag below   Here it is  I ve been a bit lazy and used inline styes    lt div id  toolbar  style  width  600px  height  100px  position  absolute  z-index  1   gt  lt  div gt   lt object data  interface svg  width  600  height  100  type  image svg xml  gt   lt  object gt    I used the following JavaScript to hook up an event to it    lt script type  text javascript  gt      var toolbar   document getElementById  toolbar        toolbar onclick   function  e            alert  Hello            lt  script gt

User · Answer

You could use following code    lt style gt       svgwrapper           position  relative             svgwrapper           position  absolute          z-index  -1         lt  style gt    lt div class  svgwrapper  onClick  function     gt       lt object src  blah    gt   lt  div gt    b3ng0 wrote similar code but it does not work  z-index of parent must be auto

User · Answer

If you just use inline svg there is no problem    x000D   x000D   lt svg id  svg1  xmlns  http   www w3 org 2000 svg  style  width  3 5in  height  1in  gt  x000D     lt circle id  circle1  r  30  cx  34  cy  34  onclick  circle1 style fill  yellow    x000D              style  fill  red  stroke  blue  stroke-width  2   gt  x000D     lt  svg gt  x000D     x000D   x000D   x000D

User · Answer

Assuming you don t need cross browser support  which is impossible without a plugin for IE   have you tried using svg as a background image   Experimental stuff for sure  but thought I would mention it

User · Answer

This started as a comment on RGB s solution but I could not fit it in so have converted it to an answer  The inspiration for which is entirely RGB s   RGB s solution worked for me  However  I wished to note a couple of points which may help others arriving at this post  like me  who are not that familiar which SVG and who may very well have generated their SVG file from a graphics package  as I had    So to apply RGB s solutions I used   The CSS    lt style gt      rect btn           stroke  fff          fill  fff          fill-opacity 0          stroke-opacity 0         lt  style gt    The jquery script   lt script type  text javascript  src      public  jquery jquery-1 7 1 js  gt  lt  script gt      lt script type  text javascript  gt        document   ready function               btn   bind  click   function event  alert  clicked svg              lt  script gt    The HTML to code the inclusion of your pre-existing SVG file in the group tag inside the SVG code    lt div gt   lt svg xmlns  http   www w3 org 2000 svg  version  1 1  gt     lt g gt        lt image x  0  y  0  width  10  height  10       xlink href      public  icons booked svg  width  10px   gt       lt rect class  btn  x  0  y  0  width  10  height  10   gt      lt  g gt   lt  svg gt   lt  div gt    However  in my case I have several SVG icons which I wish to be clickable and incorporating each of these into the SVG tag was starting to become cumbersome   So as an alternative approach where I could employ Classes I used jquery svg  This is probably a shameful application of this plugin which can do all sorts of stuff with SVG s  But it worked using the following code    lt script type  text javascript  src      public  jquery jquery-1 7 1 js  gt  lt  script gt          lt script type  text javascript  src  jquery svg min js  gt  lt  script gt   lt script type  text javascript  gt         document   ready function                svgload   bind  click   function event  alert  clicked svg                for  var i 0  i  lt  99  i                     svgload eq     i        svg                 onLoad  function                  var svg       svgload eq     i        svg  get                  svg load      public  icons booked svg    addTo  true   changeSize  false                                           settings                                        lt  script gt    where HTML   lt div class  svgload  style  width  10px  height  10px   gt  lt  div gt    The advantage to my thinking is that I can use the appropriate class where ever the icons are needed and avoid quite a lot of code in the body of the HTML which aids readability  And I only need to incorporate the pre-existing SVG file once   Edit   Here is a neater version of the script courtesy of Keith Wood  using  svg s load URL setting    lt script type  text javascript  src      public  jquery jquery-1 7 1 js  gt  lt  script gt          lt script type  text javascript  src  jquery svg min js  gt  lt  script gt   lt script type  text javascript  gt         document   ready function               svgload   on  click   function               alert  clicked svg new             svg  loadURL       public  icons booked svg               lt  script gt

User · Answer

It worked by simply replacing the  lt embed  gt  tag with  lt img  gt  and deleting the type attribute    For instance  in my code  instead of    lt embed src     images info 09c svg   type   image svg xml   width   45   onClick  afiseaza indicatie  i     indicatii  i      gt     which does not answer the clicking  I wrote    lt img src     images info 09c svg   height   25   width   25   onClick  afiseaza indicatie  i     indicatii  i      gt     It works in Internet Explorer and Google Chrome  and I hope that in the other browsers too

User · Answer

When embedding same-origin SVGs using  lt object gt   you can access the internal contents using objectElement contentDocument rootElement   From there  you can easily attach event handlers  e g  via onclick  addEventListener    etc    For example   var object      get DOM node for  lt object gt      var svg   object contentDocument rootElement  svg addEventListener  click   function       console log  hooray           Note that this is not possible for cross-origin  lt object gt  elements unless you also control the  lt object gt  origin server and can set CORS headers there   For cross-origin cases without CORS headers  access to contentDocument is blocked

User · Answer

In case you re fine with wrapping the svg in another element  a for example  and putting onclick on the wrapper  svg  pointer-events  none   CSS will do the trick

User · Answer

Perhaps what you re looking for is the SVG element s pointer-events property  which you can read about at the SVG w3C working group docs   You can use CSS to set what happens to the SVG element when it is clicked  etc

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

Examples related to html

Examples related to css

Examples related to svg