Элемент SVG <a>

Использование аналога якоря SVG ( <a>) для создания гиперссылки. Элемент SVG <a> используется для создания ссылок в SVG-изображениях, и они работают так же, как и HTML-ссылки.

Примеры:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a　xlink:href="/svg/svg-tutorial.html">
　　　　　　　　<text　x="10"　y="20">/svg/svg-tutorial.html</text>
　　　　</a>
　　　　<a　xlink:href="/svg/svg-tutorial.html"　xlink:show="new">
　　　　　　　　<text x="10" y="40">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="new")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" xlink:show="replace">
　　　　　　　　<text x="10" y="60">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="replace")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" target="_blank">
　　　　　　　　<text x="10" y="80">m/svg/svg-tutorial.html
　　　　　　　　　(target="_blank")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" target="_top">
　　　　　　　　<text x="10" y="100">/svg/svg-tutorial.html
　　　　　　　　　(target="_top")</text>
　　　　</a>
</svg>

Это结果是 изображения:

Вы можете установить атрибут xlink:show на new или replace, чтобы определить, должно ли содержимое ссылки открываться в новом окне или заменять содержимое текущего окна.

Обратите внимание, что если вы используете iframe для отображения SVG-изображения и в нём используется replace, то iframe будет целью ссылки, а не окно браузера. Если вы хотите, чтобы браузер открывал окно, а не iframe, используйте атрибут target с значением _top.

Вы также можете установить атрибут target, чтобы сообщить браузеру, открывать ли ссылку в определённом фрейме или в отдельном окне. Как и в свойстве target у ссылок в targetHTML (по крайней мере, теоретически). Обратите внимание, что браузеры по-разному интерпретируют значения атрибута target. Дополнительные подробности см. в конце этой страницы.

Графики в качестве ссылок

Графики также можно использовать в качестве ссылок. Всякий раз, когда вам нужно использовать ссылку для SVG-формы, просто поместите её между тегами <a> и </a>. Вот пример, где используется прямоугольник вместо текста в качестве ссылки:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a　xlink:href="/svg/index.html"　target="_top">
　　　　　　　　<rect　x="10"　y="20"　width="75"　height="30"
　　　　　　　　　　　　　　　　style="stroke:　#333366;　fill:　#6666cc"/>
　　　　</a>
　　　　
</svg>

Это结果是 изображения: