Menu icon Foundation
SVG and Reveal Modal

I'm, working with SVGs as a perfect alternative for not scalable image maps (old school). I can use links in a SVG and the :hover-pseudoclass. Now I would like to open a reveal modal from a link in a SVG file. Everything is working pretty fine as long as I embed the SVG directly into the page. Unfortunately the data-reveal-id is lost when I try to put the SVG in a separate file. Then all I get is another tab opening. Does anyone has a solution? Files getting relly large when putting all the SVGs inline.

svg

I'm, working with SVGs as a perfect alternative for not scalable image maps (old school). I can use links in a SVG and the :hover-pseudoclass. Now I would like to open a reveal modal from a link in a SVG file. Everything is working pretty fine as long as I embed the SVG directly into the page. Unfortunately the data-reveal-id is lost when I try to put the SVG in a separate file. Then all I get is another tab opening. Does anyone has a solution? Files getting relly large when putting all the SVGs inline.

Brandon Arnold over 3 years ago

You should wrap the svg in a tag so you can add the reveal item to that.

Arkarys over 3 years ago

Hi Brandon.

Sorry, for answering late. Had lot of other stuff to do.

  1. In the automatic mail I received from this forum about your answer. Was written "wrap the svg in a <button> tag so ..." It is not shown on the forum page? (see above) As I found out now it has to do with the < and > signs. When I use the html codes it works :)

  2. In this svg I have several links to reveal boxes. E.g. a piechart that shows different reveal items for each slice.

Brandon Arnold over 3 years ago

Ohh yeah, SVGs can't have jquery click events inside them. This means you may need to find another way to present that chart.

Or this library may be able to help:
https://github.com/toddmotto/lunar

Arkarys over 3 years ago

Thanks, for this hint. I looked it up. But unfortunately lunar is for inline svg. In my case the inline svg is working pretty well. The data-reveal-id is suppressed only when I save the svg in a separate file.

Arkarys over 3 years ago

Here you can see what's the problem: www.ark-fx.eu/svg-reveal.html.

Ercan Murat KISACA over 3 years ago

Hi @Arkarys
SVG in an object tag adds the SVG into the html with #document tag, you will see when you look up to the codes. Like an embed tag. It is completely a different document for browser and I don't think there is a way for making it work. Browser would block it for security reasons, I think.

And, why do you want to add the file seperately. Just add it into the html, nothing changes. File gets large but the site visitor will have to load it in both options. :)

I had used reveal modal at this page with svgs.
It may help someone.
Also I used dropdown inside reveal modal.
Was very complicated but it succeeded.
http://nullrefer.com/?http://www.brasidas.ch/our-global-reach-world/

Arkarys over 3 years ago

Hi @Ercan Murat KISACA ,
thanks for this idea. Always good to look up a page with browser's developer tools. ;)
I thought, it could be easier to work with - not that long monster code.
But you're right. User will have to load the same in both cases.
So, I'll keep it inline. It works, that's important.

Aside: Nice example your map with reveal maps and dropdown elements :)