如何将SVG对象插入带链接的HTML？

我不想添加一个链接到svg（这是不可能的，因为svg不是我提供的），但是想添加一个链接，如<a href=""><img src="foo.svg"/></a>。只有这次它不是img，而是object（所以我可以包含一个svg）。如何将SVG对象插入带链接的HTML？

它适用于某些浏览器，但不适用于firefox。什么是默认的想法如何做这样的事情？

来源

2010-01-18 user253104

在Firefox中<object>捕获所有点击并且不让它们从SVG文档中“冒泡”。一个明智的解决方法是用另一个首先获得点击的元素来覆盖SVG。

还好，这可以通过使用纯CSS来实现：

a {position:relative; display:inline-block;} 
a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;}

你可能想:-moz-any-link伪类添加到选择，使其壁虎只。

来源

2010-01-19 19:57:32 Kornel

把SVG文件中的链接，而不是，e.g：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<a xlink:href=""> 
    ... 
</a> 
</svg>

来源

2010-01-19 12:07:46

...如果文件被托管在同一个域，你真的想避免更改文件的服务器上，你可以尝试这样的事： VAR aElm = yourObjectElm.contentDocument.documentElement.createElementNS（” http://www.w3.org/2000/svg“，”a“）; aElm.href.baseVal =“http://your.link.here.com”; // ...将yourObjectElm.contentDocument.documentElement的所有子元素附加到aElm ... // yourObjectElm.contentDocument.documentElement.appendChild（aElm）; – 2010-01-19 12:19:17

Javascript是不可能的，我无法修改文件 – user253104 2010-01-20 12:56:13

随着svgweb你可以嵌入任意SVG跨浏览器，并通过常规的DOM方法来修改它。这包括将事件监听器附加到SVG的任何部分。

svgweb主页：
http://code.google.com/p/svgweb/

svgweb快速入门（还讨论了添加事件听众）：
http://codinginparadise.org/projects/svgweb/docs/QuickStart.html

即使你不能把它在传统的锚标记这样（我没有尝试过，它可能工作），你至少能够处理点击事件并基于它们进行导航，这实际上就是你所追求的。

来源

2010-01-19 19:49:09

JavaScript是不可能的 – user253104 2010-01-20 12:54:37

如何将SVG对象插入带链接的HTML？

回答

相关问题