I have an SVG on the following Elementor page: /

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

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

• svg
• elementor
• xlink

Share Improve this question Follow asked Mar 25 at 11:18 Rob TyrrellRob Tyrrell 3355 bronze badges 4

• You need to include all details necessary to answer a question without visiting a link so you'll need to add a minimal reproducible example to the question itself rather than just linking to some external site/example. – Robert Longson Commented Mar 25 at 11:21
• Your SVG copy&pasted into jsfiddle/g9vyx3mk, has those links working fine - clicking them only results in a 404 of course in that environment, but it proves that there is nothing wrong with those links per se. Most likely, your theme is adding its own click handlers to those elements, and one of them prevents them from performing their default task. (I count over a dozen click handlers when I inspect the element on your live page.) – C3roe Commented Mar 25 at 11:25
• @C3roe - How do I see the click handlers? – Rob Tyrrell Commented Mar 25 at 11:33
• 1 In Chrome: stackoverflow/a/58585871/1427878 – C3roe Commented Mar 25 at 11:36

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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.