Hello Community! I’m struggling with placing SVGs on a map and having them stay where they’re supposed to be and scale with the map image. What am I doing wrong? Thanks in advance for your help.
Here is my site Read-Only: Webflow - Nauka Nayarit
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Rather than using px for the absolute shift, try using percentage or another method to scale everything together.
Thank you @bro-design! I think your solution works initially, but now I’m realizing that I would have to use some custom code to trigger a hover/link when the cursor enters the outline of the SVGs…which is cool, but I need a quick, temporary solution since this map will likely be recreated at some point.
Anyway, thank you so much for your help. Greatly appreciated.
@Port_of_Folio, the percentage suggestion works! Now I’m running into another problem (see my reply to @bro-design). So instead of SVGs I’m just going to use colored dots. My last question to you is, am I setting up the map image correctly? It seems to work, but I want to do this correctly for my own experience/knowledge.
If you want to do some popup tooltip so I think not needed custom code and all is easy to do with interactions🙂
For sure. The custom code would have to be used for the hover effects on the SVG shapes. Since they are so close together we would have to use code to only trigger the hover state when the cursor enters the outline of the SVG. While I’m not going to go through all this trouble for this project, I found the techniques in this tutorial very cool. Will definitely come in handy in the future.
