manipulate objects outside svg with javascript-function inside the svg

Question

Hello!

I'm embedding a svg-graphic on my website and i'd like to manipulate the rest of the website with javascript-commands which are in the svg - though i'm not sure if this is possible.

Let me elaborate: I've got a worldmap in svg, i want to click on a country and this click should run an ajax-call and load relevant information of this country into a div in the html site where the svg is embedded.

"onclick="location.href='xxx'"" redirects to the respective site which is fine, but i'd prefer to run a js-function that fetches the site with ajax - but running a javascript-function in the svg only seems to work for functions and elements defined in the svg, not outside of it.

Is it basically possible to manipulate anything outside the svg through a js-function in the svg? How?

Regards Christian

Answer 1

ad onclick="replaceLink('yourdata')" to the svg-object where you want to start this function, define this function in svg with:

function replaceLink(data)
    {
        parent.replaceLinkinHTML(data);
    };

and add a replaceLinkinHTML-function to the html where the svg is embeded and you can easily manipulate the html-page from the svg...

Answer 2

What if I want to do exactly the opposite? I have the following structure:

HTML
  html.js
    event_handler()
  SVG
    svg.js
      action()

When a certain event is handled by event_handler() I want to call action() but no matter what I try I get the error "action() is not a function"