如何在主窗口中打开嵌入式SVG文件中的链接，而不是单独的对象中 [英] How to make links in an embedded SVG file open in the main window, not in a separate object

问题描述

我有一个SVG文件（由 Graphviz 生成）包含URL链接。我希望这些链接可点击。首先，我尝试了

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

显示图像正常，但链接不可点击。更改为object：

 < object data =/ path / to / my.svgtype =image / svg + XML> 
  

使链接可点击，但是当用户点击链接时，新页面会在对象内部打开。有没有什么方法可以使链接在主窗口中打开？

这是使用firefox 5.0，但如果您知道关于I的任何跨浏览器差异首先，如果您将SVG嵌入为< img> c $ c>，浏览器将不会打开链接，以及它们不会在< img> 内运行脚本，因为，您嵌入了图像，而且很可能您的图片可能会出现在< a> 内，并且您无法将链接放入链接中。

要在新选项卡中打开链接，可以使用目标属性（如HTML中的）或xlink特定的 xlink：show 属性的值为 new 。 SVG规范表示以下内容：

< blockquote>

[xlink：show]属性用于向后兼容SVG 1.1。它为支持XLink的处理器提供了文档。在冲突的情况下，目标属性具有优先权，因为它可以表达更宽范围的值。

target 属性的值可以是：

• _replace


• _self


• _parent


• _top


• _blank

因此，在您的SVG中，如下：

 < a xlink：href =http://example.comtarget =_ blank> [ ...]< / A> 
  

但是目前所有能够显示SVG的浏览器都支持 xlink：show 和 target 属性（我还没有在IE9中测试过）。

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

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

解决方案

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.

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

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

And the values of the target attribute can be:

• _replace
• _self
• _parent
• _top
• _blank

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

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

But currently all browsers capable of showing SVG support both xlink:show and target attributes (I haven't tested in IE9 though).

这篇关于如何在主窗口中打开嵌入式SVG文件中的链接，而不是单独的对象中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！