Как вставить объект 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
Даже если вы не можете поместить его в традиционный якорный тег таким образом (я не пробовал, он мог бы работать), вы, по крайней мере, сможете обрабатывать события щелчка и перемещаться по ним, что действительно что вам нужно.