Html 如何在主窗口中打开嵌入的 SVG 文件中的链接,而不是在单独的对象中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7008355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:59:49  来源:igfitidea点击:

How to make links in an embedded SVG file open in the main window, not in a separate object

htmlsvg

提问by mojones

I have an SVG file (generated by Graphviz) that contains URL links. I would like these links to be clickable. First I tried

我有一个包含 URL 链接的 SVG 文件(由Graphviz生成)。我希望这些链接可以点击。首先我试过

<img src="path/to/my.svg"/>

which displays the image fine but the links are not clickable. Changing to object:

显示图像很好,但链接不可点击。更改为对象:

 <object data="/path/to/my.svg" type="image/svg+xml">

makes the links clickable, but when the user clicks on them, the new page opens inside the object. Is there any way that I can make the links open in the main window?

使链接可点击,但当用户点击它们时,新页面会在对象内打开。有什么办法可以让链接在主窗口中打开?

This is using firefox 5.0, but if there are any cross-browser differences you know about I would appreciate the warning!

这是使用 Firefox 5.0,但如果您知道任何跨浏览器差异,我将不胜感激!

回答by Spadar Shut

First, if you embed SVG as <img>, browsers won't open links, as well as they wont run scripts inside <img>, because, well, you embed an image, and very probably your image may appear inside an <a>, and you can't put links inside links.

首先,如果您嵌入SVG的<img>,浏览器不会打开链接,以及他们不会内运行脚本<img>,因为,你嵌入一个图片,也很可能是你的图像可能会出现内部的<a>,你不能把链接内部链接。

And to make links open in new tabs, you can use either the targetattribute, like in HTML, or xlink-specific xlink:showattribute with the value new. The SVG spec saysthe following:

并且要在新选项卡中打开链接,您可以使用target属性(如在 HTML 中)或 xlink 特定的xlink:show属性,其值为new。SVG 规范说明如下:

[xlink:show] attribute is provided for backwards compatibility with SVG 1.1. It provides documentation to XLink-aware processors. In case of a conflict, the target attribute has priority, since it can express a wider range of values.

提供 [xlink:show] 属性是为了与 SVG 1.1 向后兼容。它为支持 XLink 的处理器提供文档。在发生冲突的情况下,目标属性具有优先权,因为它可以表达更广泛的值。

And the values of the targetattribute can be:

并且target属性的值可以是:

  • _replace
  • _self
  • _parent
  • _top
  • _blank
  • _代替
  • _自己
  • _父母
  • _最佳
  • _空白的

Thus, in your SVG you need to write as follows:

因此,在您的 SVG 中,您需要按如下方式编写:

<a xlink:href="http://example.com" target="_blank">[...]</a>

But currently all browsers capable of showing SVG support both xlink:showand targetattributes (I haven't tested in IE9 though).

但是目前所有能够显示 SVG 的浏览器都支持xlink:showtarget属性(不过我还没有在 IE9 中测试过)。