make an html svg object also a clickable link

Question

I have an SVG object in my HTML page and am wrapping it in an anchor so when the svg image is clicked it takes the user to the anchor link    lt a href  http   www google com   gt       lt object data  mysvg svg  type  image svg xml  gt           lt span gt Your browser doesn t support SVG images lt  span gt       lt  object gt   lt  a gt    When I use this code block  clicking the svg object doesn t take me to google  In IE8 lt  the span text is clickable   I do not want to modify my svg image to contain  tags   My question is  how can I make the svg image clickable

User · Answer

To accomplish this in all browsers you need to use a combination of @energee, @Richard and @Feuermurmel methods.

<a href="" style="display: block; z-index: 1;">
    <object data="" style="z-index: -1; pointer-events: none;" />
</a>

Adding:

pointer-events: none; makes it work in Firefox.
display: block; gets it working in Chrome, and Safari.
z-index: 1; z-index: -1; makes it work in IE as well.

User · Answer

I had the same issue and managed to solve this by   Wrapping the object with an element set to block or inline-block   lt a gt       lt span gt           lt object gt  lt  object gt       lt  span gt   lt  a gt    Adding to  lt a gt  tag   display  inline-block  position  relative   z-index  1    and to the  lt span gt  tag   display  inline-block    and to the  lt object gt  tag   position  relative   z-index  -1   See an example here  http   dabblet com gist d6ebc6c14bd68a4b06a6  Found via comment 20 here https   bugzilla mozilla org show bug cgi id 294932

User · Answer

A simplification of Richard s solution  Works at least in Firefox  Safari and Opera    lt a href       style  display  block   gt       lt object data       style  pointer-events  none     gt   lt  a gt    See http   www noupe com tutorial svg-clickable-71346 html for additional solutions

User · Answer

Just don t use  lt object gt   Here s a solution that worked for me with  lt a gt  and  lt svg gt  tags    lt a href   lt your-link gt   class  mr-5 p-1 border-2 border-transparent text-gray-400 rounded-full hover text-white focus outline-none focus text-white focus bg-red-700 transition duration-150 ease-in-out  aria-label  Notifications  gt       lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 24 24  width  30       height  30  gt  lt path class  heroicon-ui  fill   fff  d  M17 16a3 3 0 1 1-2 83      2H9 83a3 3 0 1 1-5 62- 1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1      1v1h14a1 1 0 0 1  9 1 45l-4 8a1 1 0 0 1- 9 55H5a1 1 0 0 0 0 2h12zM7 12h9 38l3-     6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z   gt       lt  svg gt   lt  a gt

User · Answer

I resolved this by editing the svg file too    I wrapped the xml of the whole svg graphic in a group tag that has a click event as follows    lt svg       gt   lt g id  thefix  onclick  window top location href  http   www google com     gt    lt  --     your graphics     -- gt   lt  g gt   lt  svg gt    Solution works in all browsers that support object svg script   default a img tag inside your object element for browsers that don t support svg and you ll cover the gamut of browsers

User · Answer

You could also stick something like this in the bottom of your SVG  right before the closing  lt  svg gt  tag     lt a xmlns  http   www w3 org 2000 svg  id  anchor  xlink href     xmlns xlink  http   www w3 org 1999 xlink  target   top  gt       lt rect x  0  y  0  width  100   height  100   fill-opacity  0   gt   lt  a gt    Then just amend the link to suit  I have used 100  width and height to cover the SVG it sits in  Credit for the technique goes to the smart folks at Clearleft com - that s where I first saw it used

User · Answer

Do it with javascript and add a onClick-attribute to your object-element    lt object data  mysvg svg  type  image svg xml  onClick  window location href  http   google at    gt       lt span gt Your browser doesn t support SVG images lt  span gt   lt  object gt

User · Answer

Actually  the best way to solve this is    on the  lt object gt  tag  use   pointer-events  none    Note  Users which have the Ad Blocker plugin installed get a tab-like  Block  at the upper right corner upon hovering  the same as a flash banner gets   By settings this css  that ll go away as well   http   jsfiddle net energee UL9k9

User · Answer

This is very late  but I was wondering why energee s solution works  specifically  how the  lt object gt  element affects its parent elements  tl dr You cannot click on an anchor that has an  lt object gt  element in it because the click events are being captured by whatever is inside of the  lt object gt  element  which then doesn t bubble it back out  jsfiddle  To expand on the symptom described in the original question  not only will an  lt object gt  element inside an anchor element cause the anchor to become unclickable  it seems that an  lt object gt  element as a child of any element will cause click  mousedown  and mouseup events  possibly touch events too  to not fire on the parent element   when you are clicking inside the  lt object gt  s bounding rect    lt span gt       lt object type  quot image svg xml quot  data  quot https   icons getbootstrap com icons three-dots svg quot  gt       lt  object gt   lt  span gt   document      querySelector  span        addEventListener  click   console log     will not fire  Now   lt object gt  elements behave somewhat  quot like quot   lt iframe gt s  in the sense that they will establish new browsing contexts  including when the content is an  lt svg gt  document  In JavaScript  this is manifested through the existence of the HTMLObjectElement contentDocument and HTMLObjectElement contentWindow properties  This means that if you add an event listener to the  lt svg gt  element inside the  lt object gt   document      querySelector  object        contentDocument     returns null if cross-origin  the same-origin policy      querySelector  svg        addEventListener  click   console log   and then click on the image  you will see the events being fired  Then it becomes clear why the pointer-events  none  solution works   Without this style  any MouseEvent that is considered  quot interactive quot   such as click and mousedown  but not mouseenter  is sent to the nested browsing context inside the  lt object gt   which will never bubble out of it   With this style  the MouseEvents aren t sent into the  lt object gt  in the first place  then the  lt object gt  s parent elements will receive the events as usual    This should explain the z-index solution as well  as long as you can prevent click events from being sent to the nested document  the clicking should work as expected   In my test  the z-index solution will work as long as the parent element is not inline and the  lt object gt  is positioned and has a negative z-index   Alternatively  you can find a way to bubble the event back up   let objectElem   document querySelector  object   let svgElemt   objectElem contentDocument querySelector  svg    svgElem addEventListener  click        gt        window postMessage  Take this click event please           window being the outermost window     window addEventListener  message   console log

User · Answer

The easiest way is to not use  lt object   Instead use an  lt img  tag and the anchor should work just fine

User · Answer

Would like to take credit for this but I found a solution here    https   teamtreehouse com forum how-do-you-make-a-svg-clickable  add the following to the css for the anchor   a svg     position  relative    display  inline-block     a svg after     content         position  absolute    top  0    right  0    bottom  0    left 0       lt a href     class  svg  gt     lt object data  random svg  type  image svg xml  gt       lt img src  random jpg    gt     lt  object gt   lt  a gt    Link works on the svg and on the fallback

User · Answer

i tried this clean easy method and seems to work in all browsers  Inside the svg file    x000D   x000D   lt svg gt  x000D   lt a id  anchor  xlink href  http   www google com  target   top  gt  x000D     x000D   lt  --your graphic-- gt  x000D     x000D   lt  a gt  x000D   lt  svg gt  x000D     x000D   x000D   x000D

[html] make an html svg object also a clickable link

Examples related to html

Examples related to object

Examples related to svg

Examples related to anchor