Как сделать ссылки во встроенном SVG-файле открытыми в главном окне, а не в отдельном объекте - PullRequest
33 голосов
/ 10 августа 2011

У меня есть файл SVG (сгенерированный Graphviz ), который содержит URL-ссылки. Я хотел бы, чтобы эти ссылки были кликабельными. Сначала я попробовал

<img src="path/to/my.svg"/>

, который отображает изображение нормально, но ссылки не кликабельны. Смена объекта:

 <object data="/path/to/my.svg" type="image/svg+xml">

делает ссылки кликабельными, но когда пользователь нажимает на них, новая страница открывается внутри объекта. Можно ли как-нибудь открыть ссылки в главном окне?

Это использует Firefox 5.0, но если есть какие-либо различия между браузерами, о которых вы знаете, я был бы рад предупреждению!

1 Ответ

41 голосов
/ 11 августа 2011

Во-первых, если вы встраиваете SVG как <img>, браузеры не будут открывать ссылки, а также не будут запускать скрипты внутри <img>, потому что, в общем, вы встраиваете изображение, и очень вероятно, что ваше изображение может появиться внутри <a>, и вы не можете помещать ссылки внутри ссылок.

А чтобы сделать ссылки открытыми на новых вкладках, вы можете использовать либо атрибут target, как в HTML, либо атрибут xlink:show, специфичный для xlink, со значением new. Спецификация SVG говорит следующее:

Атрибут [xlink: show] предоставляется для обратной совместимости с SVG 1.1. Он предоставляет документацию для процессоров, поддерживающих XLink. В случае конфликта атрибут target имеет приоритет, поскольку он может выражать более широкий диапазон значений.

А значения атрибута target могут быть:

  • _replace
  • _self
  • _parent
  • _top
  • _blank

Таким образом, в вашем SVG вам нужно написать следующее:

<a xlink:href="http://example.com" target="_blank">[...]</a>

Но в настоящее время все браузеры, способные отображать SVG, поддерживают атрибуты xlink:show и target (хотя я не проверял в IE9).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...