svgelementorxlink

I'm having a problem with a link in an SVG

I have an SVG on the following Elementor page: https://ennovus.co.uk/technologies/

Most of the 'boxes' have # links to content further down the page. But, the 2 boxes labelled Services and Funding Solutions have relative links to other pages on the site.

The # links work, with no issues, but the relative links don't.

I'm aware that xlink:href is now depreciated, but it is still supported currently in most browsers.

I've tried change the xlink:href to just href, but that also doesn't work.

Thanks in advance for any help you can give me.

Rob

Solution

  • Relative links in embedded SVGs often break. Use JavaScript to handle clicks:

    1. Give your "Services" and "Funding Solutions" SVG boxes unique id attributes.

    2. Add JavaScript to your Elementor page to:

      a. Select these boxes by their IDs.

      b. Add click listeners to them.

      c. On click, use window.location.href = '/your-relative-link'; to navigate.

    This is the most reliable way to make those links work.