CODEWITHSUNDEEP
javascriptajaxsvgexternal
Christian Benke
Christian Benke

Reputation: 61

manipulate objects outside svg with javascript-function inside the svg

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

Upvotes: 1

Views: 1650

Answers (2)

Mike Dupee
Mike Dupee

Reputation: 41

The trick is that the SVG is a child of the "window" not a child of the "window.document" like most things. If you have a script in the SVG, you access the stuff in your document by using 

this.parent.document.getElementById("theIDYouWant")

If you have a script in the <head> or <body> tag of your document, you access the SVG's stuff by using a convention like

window.theIDofYourSVG.childNodes[theNumberOfTheThingInYourSVG]

Upvotes: 4

Christian Benke
Christian Benke

Reputation: 61

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...

Upvotes: 2

Related Questions