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

Question

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

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

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

Answer 2

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

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

Answer 3

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

svgweb home page:
http://code.google.com/p/svgweb/

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

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