Как вставить объект SVG в HTML со ссылками?
Я не хочу добавлять ссылку к svg (который не возможен, потому что svg не обеспечивается мной), но хотят добавить ссылку как <a href=""><img src="foo.svg"/></a>. Только это на этот раз это не img, но a object (таким образом, я могу включать svg).
Это работает с некоторым браузером, но например не с Firefox. Какова идея по умолчанию, как сделать что-то как этот?
3 ответа
В Firefox <Объект> Захватывает все щелчки и не позволяют им «пузырь» из документа 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 Pseudo-Class к селектору, чтобы сделать его Gecko-только.
Вместо этого поместите ссылку внутри файла SVG, например:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="">
...
</a>
</svg>
С помощью svgweb вы можете встроить произвольный SVG кросс-браузер и модифицировать его обычными DOM-методами. Это включает в себя прикрепление слушателей событий к любой части SVG.
svgweb домашней странице:
http://code.google.com/p/svgweb/
svgweb quickstart (также обсуждается добавление слушателей событий):
http://codinginparadise.org/projects/svgweb/docs/QuickStart.html
Даже если вы не можете поместить его в традиционный тег якоря таким образом (я не пробовал, это может сработать), вы, по крайней мере, сможете обрабатывать события кликов и осуществлять навигацию на их основе, что на самом деле является тем, что вы ищете.