I have a unique inline svg code snippet in my html:
<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...
In order to trigger the visibility of another element by clicking on the svg, I attempted to utilize this javascript code:
let searchIcon = document.querySelector('#nav-search-icon')
let searchBar = document.querySelector('#search-bar')
searchIcon.onclick = function() {
if (searchBar.style.visibility === 'hidden') {
searchBar.style.visibility = 'visible'
} else if (searchBar.style.visibility === 'visible') {
searchBar.style.visibility = 'hidden'
}
}
Despite these efforts, the javascript implementation did not yield the expected result. It seems that the issue stems from the fact that the svg element is not interactive when clicked (cursor does not change to pointer/hand). Various attempts were made such as adding pointer-events="all" within the svg and path elements, as well as applying pointer-events: all; in CSS, but none proved successful.
**EDIT: ** Alternative solutions involving wrapping the svg in an <a> tag were explored, although the goal remains to invoke the onclick event directly on the svg element without linking to another page.