Make an HTML Svg Object Also a Clickable Link

make an html svg object also a clickable link

Actually, the best way to solve this is... on the <object> 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/

How to make an svg object clickable

document.getElementById("svg").addEventListener('click', doSomething);

function doSomething(e) {
  // code
}

How to make an inline svg clickable in html/css to use onclick in javascript?

I made a few changes to the JS, but wrapped the SVG inside of an <a> tag and added the onclick() to that, like so:

searchClick = function() {
  let searchIcon = document.querySelector('#nav-search-icon')
  let searchBar = document.querySelector('#search-bar')
  if (searchBar.style.display === 'none') {
    searchBar.style.display = 'block'
  } else {
    searchBar.style.display = 'none'
  }
}

<a href="#" onclick="searchClick();"><svg id="nav-search-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32.2 32.2"><path d="M19 0C11.8 0 6 5.8 6 13c0 3.1 1.1 5.9 2.9 8.2l-8.6 8.6c-0.5 0.5-0.5 1.4 0 2 0.5 0.5 1.4 0.5 2 0l8.6-8.6C13.1 24.9 15.9 26 19 26c7.2 0 13-5.8 13-13S26.2 0 19 0zM19 24C12.9 24 8 19.1 8 13S12.9 2 19 2 30 6.9 30 13 25.1 24 19 24z"/></svg></a>

<div style="display: none;" id="search-bar">
  <input width="200" value="Search"/>
</div>

Make an HTML Svg Object Also a Clickable Link

make an html svg object also a clickable link

How to make an svg object clickable

How to make an inline svg clickable in html/css to use onclick in javascript?

Related Topics

Leave a reply