I have an svg with 3 buttons(g tag path based shapes),each button has a path and text element .The thing is due to the text element the g tag is not clickable ,as when i replaced text tag with another path of an image the click function was working .My issue is click event is not firing due to text elements .I tried putting text in foreign object and trying ,but the text goes all haphazard,as the button is curved at an angle.
I got this answer from some other post in stackoverflow to put style pointer-events: none; but this isnt working too

<g id="bottomButtons"  >           
          <g id="contactBtn"  onclick="toggleContactUs()" transform="translate(.8293 476.2)" stroke-linejoin="miter" stroke-miterlimit="2"   >
            <path id="path37-6"    transform="matrix(1 0 0 -1 0 516.8)" d="m577.5 94.76-8.955 50.79a8.391 8.391 50 0 0 8.264 9.848h161c5.523 0 6.352-2.596 1.768-5.677-45.42-30.52-96.84-52.08-150.5-62.94-5.413-1.096-10.6 2.544-11.56 7.982z" fill="#333" stop-color="#000000" stroke-width=".9318" style="-inkscape-stroke:none;font-variation-settings:normal"/>
            <text id="textContact" style="pointer-events: none;" x="635.36108" y="391.35938" fill="#ececec" font-family="Sans" font-size="32px" text-align="center" text-anchor="middle" style="-inkscape-stroke:none;font-variation-settings:normal;line-height:normal;paint-order:fill markers stroke;text-decoration-color:#000000" xml:space="preserve"><tspan id="tspan117-3-1-6" x="635.36108" y="391.35938" fill="#ececec" font-family="Arial" font-size="32px">Contact</tspan></text>
          </g>
          <g id="settingsBtn"  stroke-linejoin="miter" stroke-miterlimit="2">
            <path id="path35-5"  transform="matrix(1 0 0 -1 0 992.8)" d="m494.9 75.76c-17.73 0.6894-35.4 2.502-52.9 5.426-5.447 0.9102-9.065 6.174-8.106 11.61l9.637 54.66a11.92 11.92 40 0 0 11.74 9.848h99.26a11.92 11.92 140 0 0 11.74-9.848l9.689-54.94c0.9591-5.439-2.637-10.81-8.06-11.85-5.25-1.01-9.912-1.762-10.39-1.814-20.8-2.261-31.7-2.955-42.61-3.224-5.521-0.136-14.48-0.0723-20 0.1423z" fill="#333" stop-color="#000000" stroke-width=".9318" style="-inkscape-stroke:none;font-variation-settings:normal"/>
            <text id="textSettings" style="pointer-events: none;"  x="507.52344" y="887.68799" fill="#ececec" font-family="Sans" font-size="28px" text-align="center" text-anchor="middle" style="-inkscape-stroke:none;font-variation-settings:normal;line-height:normal;paint-order:fill markers stroke;text-decoration-color:#000000" xml:space="preserve"><tspan id="tspan117-3-6-0" x="507.52344" y="887.68799" fill="#ececec" font-family="Arial" font-size="28px">Mail Trip</tspan></text>
          </g>
          <g id="picBtn" >
            <path id="path36-3"  transform="matrix(1 0 0 -1 0 992.8)" d="m420.7 87.3c-52.8 10.94-103.4 32.25-148.2 62.27-4.588 3.075-3.762 5.667 1.761 5.667h158.6a8.391 8.391 130 0 0 8.264-9.848l-8.842-50.15c-0.9589-5.439-6.144-9.059-11.55-7.939z" fill="#333" stroke-width=".9318"/>
            <text id="textPicture" style="pointer-events: none;" x="375.28574" y="867.90625" fill="#ececec" font-family="Sans" font-size="32px" stroke-linejoin="miter" stroke-miterlimit="2" text-align="center" text-anchor="middle" style="-inkscape-stroke:none;font-variation-settings:normal;line-height:normal;paint-order:fill markers stroke;text-decoration-color:#000000" xml:space="preserve"><tspan id="tspan117-3-3" x="375.28574" y="867.90625" fill="#ececec" font-family="Arial" font-size="32px">Pictures</tspan></text>
          </g>
        </g>

My js code

  function toggleContactUs() {
  console.log("clicked contact us button");
  const mainContent = document.getElementById("MainContent");
  const secContent = document.getElementById("SecContent");
  const picsContent = document.getElementById("PicsContent");
  const contactUsContent = document.getElementById("ContactUsContent");

  // Toggle visibility
  if (contactUsContent.classList.contains("hidden")) {
    contactUsContent.classList.remove("hidden");
    mainContent.classList.add("hidden");
    secContent.classList.add("hidden");
    picsContent.classList.add("hidden");
  } else {
    contactUsContent.classList.add("hidden");
    mainContent.classList.remove("hidden");
  }
}