Как вставить объект SVG в HTML со ссылками?

Я не хочу добавлять ссылку на svg (что невозможно, потому что svg не предоставляется мной), но вы хотите добавить ссылку, например <a href=""><img src="foo.svg"/></a>. Только то, что на этот раз это не img, но a object (поэтому я могу включить svg).

Он работает с некоторым браузером, но, например, не с firefox. Какова идея по умолчанию, как сделать что-то подобное?

Ответ 1

В 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 в селектор, чтобы сделать его только Gecko.

Ответ 2

Поместите ссылку внутри файла svg, например:

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

Ответ 3

С помощью svgweb вы можете вставлять произвольный SVG-браузер и изменять его с помощью обычных методов DOM. Сюда входит присоединение прослушивателей событий к любой части SVG.

Главная страница svgweb:
http://code.google.com/p/svgweb/

svgweb quickstart (также обсуждается добавление слушателей событий):
http://codinginparadise.org/projects/svgweb/docs/QuickStart.html

Даже если вы не можете поместить его в традиционный якорный тег таким образом (я не пробовал, он мог бы работать), вы, по крайней мере, сможете обрабатывать события щелчка и перемещаться по ним, что действительно что вам нужно.