How can i get the actual shape of the SVG and not the Viewbox of it to react?

Ask the community
,
1

I’m having trouble with
I try to Build a map, with different SVG’s. When you click on them, a subtext opens. Thats the Idea. My Problem is, that the complete BOX of the SVG is reacting. I build them in as “shapes” but the Link/Animation has the border of the rectangular shapebox.

Is there a possibility to work around it so that only the actual shape of the SVG reacts to the Mouseover?

Working in
Wix Studio Editor

Site link
i did a testbuild, and made the lighter blue one reactive.

What I’ve tried so far
i searched on Youtube, reddit and in the forum, but nothing helped me so far :frowning:

2

Interactions apply to the bounding box of the element.

Most of the times I’ve seen interactive maps, it’s been through something like Leaflet.js, and combines GeoJSON with a map (or custom tiles). Here’s an example - Interactive Choropleth Map - Leaflet - a JavaScript library for interactive maps

3

found the solution: code (HTML only) in an Iframe:

<svg version="1.1" id="interactive-map" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="yourviewbox">
  /* you can use the id if you want to make further design changes in a css */

<style>
    /* All regions grey */
    .region {
      fill: #cccccc;
      transition: fill 0.3s, 
      cursor: pointer;
    }
    /* Hover-colour */
    .region:hover {
      fill: #ff0000;
    }
  </style>

<!-- Region 1, you can delete target="_blank" if you want the user to stay on your site-->

<a xlink:href="https://yourlink.com/region1" target="_blank">
    <path class="region" d="Here comes the SVG path"/>
  </a>

<!--  Region 2 -->

<a xlink:href="https://yourlink.com/region2" target="_blank">
    <path class="region" d="Here comes the SVG path"/>
  </a>

<!-- add further regions  -->

</svg>