a

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

SVG элемент <a> создаёт гиперссылку на другие веб-страницы, файлы, позиции в этом же документе, email-адреса или другие URL. Очень похож на элемент HTML <a>.

SVG элемент <a> является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру.

Пример

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Ссылка в фигуре -->
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- Ссылка в тексте -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle">&lt;circle&gt;</text>
  </a>
</svg>
css
/* Так как SVG по умолчанию не предоставляет визуальных стилей для ссылок,
   будет лучше задать их самостоятельно */

@namespace svg url(http://www.w3.org/2000/svg);
/* Необходимо выделить только SVG элементы <a>, но не HTML.
   Смотрите предупреждение ниже */

svg|a:link,
svg|a:visited {
  cursor: pointer;
}

svg|a text,
text svg|a {
  fill: blue; /* Даже для текста SVG использует заливку */
  text-decoration: underline;
}

svg|a:hover,
svg|a:active {
  outline: dotted 1px blue;
}

Предупреждение: Поскольку имя этого элемента совпадает с элементом HTML <a>, обращение a в CSS или querySelector может выбрать не тот тип элемента, который требуется. Используйте правило @namespace, чтобы разделять их.

Атрибуты

download Экспериментальная возможность

Указывает браузеру выполнить загрузку по URL, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально. Тип: <string> ;Значение по умолчанию: none;Анимируем: нет

href

URL или фрагмент URL для перехода. Тип: <URL> ; Значение по умолчанию: none; Анимируем: да

hreflang

URL на человеческом языке или фрагмент URL для перехода. Тип: <string>; Значение по умолчанию: none; Анимируем: да

ping Экспериментальная возможность

Разделённый пробелами список URL при переходе по которым браузер будет отправлять POST запросы с телом PING (в фоне). Обычно используется для трекинга. Тип: <list-of-URLs>; Значение по умолчанию: none; Анимируем: нет

referrerpolicy Экспериментальная возможность

Какой referrer отправить при получении URL. Тип: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Значение по умолчанию: none; Анимируем: нет

rel Экспериментальная возможность

Отношение между целевым объектом и объектом link. Тип: <list-of-Link-Types> ; Значение по умолчанию: none; Анимируем: да

target

Где отобразить переход URL. Тип: _self|_parent|_top|_blank|<name> ; Значение по умолчанию: _self; Анимируем: да

type

MIME type для ссылки URL. Тип: <string> ; Значение по умолчанию: none; Анимируем: да

xlink:href Устарело

URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами. Тип: <URL> ; Значение по умолчанию: none; Анимируем: да

Примечания по использованию

КатегорииЭлемент-контейнер
Разрешённый контентЛюбое количество следующих элементов, в любом порядке:
Элементы анимации
Элементы описания
Элементы фигуры
Структурные элементы
Элементы градиента
<a>, <clipPath>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Спецификации

Specification
Scalable Vector Graphics (SVG) 2
# AElement

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
a
download
href
hreflang
ping
Experimental
referrerpolicy
no-referrer-when-downgrade
origin-when-cross-origin
unsafe-url
rel
systemLanguage
target
type
xlink:actuate
Deprecated
xlink:href
Deprecated
xlink:show
Deprecated
xlink:title
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.