使用 svg 内部的 javascript 函数操作 svg 外部的对象

发布于 2024-09-05 13:23:06 字数 384 浏览 4 评论 0原文

我在我的网站上嵌入了一个 svg 图形,我想使用 svg 中的 javascript 命令来操作网站的其余部分 - 尽管我不确定这是否可能。

让我详细说明一下: 我有一个 svg 格式的世界地图,我想单击一个国家/地区,这次单击应该运行 ajax 调用并将该国家/地区的相关信息加载到嵌入 svg 的 html 站点中的 div 中。

“onclick =“location.href ='xxx'””重定向到相应的站点,这很好,但我更喜欢运行一个使用ajax获取站点的js函数 - 但仅在svg中运行javascript函数似乎适用于 svg 中定义的函数和元素,而不是它之外的函数和元素。

基本上可以通过 svg 中的 js 函数来操作 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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

风情万种。 2024-09-12 13:23:06

诀窍在于,SVG 是“窗口”的子级,而不是像大多数东西一样是“window.document”的子级。如果 SVG 中有脚本,则可以使用

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

以下命令访问文档中的内容: 如果您在 标记中有脚本您的文档中,您可以使用如下约定来访问 SVG 的内容

window.theIDofYourSVG.childNodes[theNumberOfTheThingInYourSVG]

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]
薄暮涼年 2024-09-12 13:23:06

ad onclick="replaceLink('yourdata')" 到要启动此函数的 svg 对象,在 svg 中定义此函数:

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

并将replaceLinkinHTML 函数添加到嵌入 svg 的 html 中,您可以轻松操作svg 中的 html 页面...

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文