SVG iframe embed and clickable links: how to target the _top ?

Question

I need to display a svg image (on which I have no control on) on a page I have control on. This svg image has links, but when I click on them, the page is opened in the iframe. A solution would be to write target="_top" in the svg link, but I have no control on that file.

Is there a way to have the links open in the parent page (as it was a clickable image map)?

Answer 1

If the svg file is hosted on the same domain you can reach into it with script to do the target="_top" modification.

Something like this:

var link_elms = youriframe.contentDocument.querySelectorAll("a");
for(var i=0;i<link_elms.length;i++)
{
  link_elms[i].setAttribute("target", "_top");
}

The other option is to make a copy of the svg file so that you gain full control over it.