SVG Link / xlink pop a bootstrap modal?

[pierrebalian]

Hello,

I’ve made an SVG, and I made a path that is linkable. I did this using the xlink code.

The problem is that when viewing the source when this is loaded onto my site the data-target seems to be stripped out, which of course stops the modal from launching. For whatever reason the data-toggle stays in place.

Do any of you code super-geniuses have any ideas on how I can make this work? Essentially i have one graphic with many zones, and when you click on the zone I want to pop a modal with more info. I suppose if I cant do a modal I could do a permanently open pane of some sort?

[Paulie_D]

Perhaps you could make a proper demo…the code you have already isn’t really clear.

[pierrebalian]

You can view it here, the part labeled “Chuck” is the link if you want to inspect it.

http://www.simply-essentials.com/know-your-beef/

[Paulie_D]

Inspecting is a lot to ask.

A Codepen we can play with is of much more use.

[Shikkediel]

I suspect the issue might be related to clicks not getting registered on an embedded svg rather than the data-target being stripped.

[pierrebalian]

Hello,
For some reason Codepen is giving me a whitescreen right now, so I set this up in jsfiddle.

https://jsfiddle.net/223n6xke/

So yeah, in the fiddle I inlined the SVG and now the data-target isnt stripped and everything is working fine!

[Paulie_D]

Codepen is having traffic load issues at present.

in the fiddle I inlined the SVG and now the data-target isnt stripped and everything is working fine!

Yeah, that would do it.

[Author]

Posts