使用 svg 内部的 javascript 函数操作 svg 外部的对象
我在我的网站上嵌入了一个 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
诀窍在于,SVG 是“窗口”的子级,而不是像大多数东西一样是“window.document”的子级。如果 SVG 中有脚本,则可以使用
以下命令访问文档中的内容: 如果您在
或
标记中有脚本您的文档中,您可以使用如下约定来访问 SVG 的内容
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
If you have a script in the
<head>
or<body>
tag of your document, you access the SVG's stuff by using a convention likead onclick="replaceLink('yourdata')" 到要启动此函数的 svg 对象,在 svg 中定义此函数:
并将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:
and add a replaceLinkinHTML-function to the html where the svg is embeded and you can easily manipulate the html-page from the svg...