CODEWITHSUNDEEP
wordpresssvghrefelementorxlink
Denise
Denise

Reputation: 63

weblinks svg file not working once placed within webpage

On my home page I am trying to insert an svg with clickable parts that link to other webpages. I made this svg with Illustrator and when I open it in a browser directly everything works the way it should. However, once I place this svg on my webpage, upon clicking it, it seems to open an image instead of opening the actual page it is linked to. If you rightclick and click on 'open in new tab' or 'open in new window' it does open the link.

The svg is displayed on www.unfoldmyworld.com, it is the worldmap with the clickable images.

Here is a snippet of code from the svg regarding a clickable area:

<a xlink:href="http://www.unfoldmyworld.com/Africa" xlink:show="replace"> 
        <polygon id="Box-1" fill="#FFFFFF" opacity="0" points="366.938,336.958 461.559,
        336.946 461.583,409.583 481.003,409.56 480.979,449.266 441.263,449.266 441.28,
        431.596 366.938,431.58      "/>

In order to get the svg onto my wordpress elementor page I installed the plugin svg support. I already tried putting in xlink:show="new" and target="_blank" which did not do the trick. I have also tried putting the whole svg inline in an html code box, which resulted in the same issue. If anyone can tell me what I have to do to get these links to actually open the intended page in the current window (not in a new one), that would be greatly appreciated.

Upvotes: 1

Views: 816

Answers (1)

Denise
Denise

Reputation: 63

I managed to find a solution to this problem myself. It turns out that this issue is caused by Elementor. It automatically opens a lightbox when clicked on the link. To solve this issue the data-elementor-open-lightbox="no" attribute needs to be added to the link within the svg file.

Upvotes: 2

Related Questions