a

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

Элемент <a> является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в 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>
/* Так как 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 Устарело SVG 2
URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами.
Тип<URL> ; Значение по-умолчаниюnoneАнимируемда

Глобальные аттрибуты

Core Attributes
Наиболее используемые: id, lang, tabindex
Styling Attributes
class, style
Conditional Processing Attributes
Наиболее используемые: requiredExtensions, systemLanguage
Event Attributes
Global event attributesDocument element event attributesGraphical event attributes
Presentation Attributes
Наиболее используемые: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
XLink Attributes
Наиболее используемые: xlink:title
ARIA Attributes
aria-activedescendantaria-atomicaria-autocompletearia-busyaria-checkedaria-colcountaria-colindexaria-colspanaria-controlsaria-currentaria-describedbyaria-detailsaria-disabledaria-dropeffectaria-errormessagearia-expandedaria-flowtoaria-grabbedaria-haspopuparia-hiddenaria-invalidaria-keyshortcutsaria-labelaria-labelledbyaria-levelaria-livearia-modalaria-multilinearia-multiselectablearia-orientationaria-ownsaria-placeholderaria-posinsetaria-pressedaria-readonlyaria-relevantaria-requiredaria-roledescriptionaria-rowcountaria-rowindexaria-rowspanaria-selectedaria-setsizearia-sortaria-valuemaxaria-valueminaria-valuenowaria-valuetextrole

Интерфейс DOM

Этот элемент реализует интерфейс SVGAElement.

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

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

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

Спецификация Статус Комментарий
Scalable Vector Graphics (SVG) 2
Определение '<a>' в этой спецификации.
Кандидат в рекомендации Аттрибут xlink:href заменён на href
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<a>' в этой спецификации.
Рекомендация Изначальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
aChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 9Safari Полная поддержка 3.1WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3.1Samsung Internet Android Полная поддержка Да
downloadChrome ? Edge ? Firefox Полная поддержка ДаIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Полная поддержка ДаOpera Android ? Safari iOS ? Samsung Internet Android ?
hrefChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 51IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка 9WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 51Opera Android ? Safari iOS Полная поддержка 9Samsung Internet Android Полная поддержка Да
hreflangChrome Нет поддержки НетEdge Полная поддержка ДаFirefox Полная поддержка 61IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 61Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
pingChrome Нет поддержки НетEdge Полная поддержка ДаFirefox Полная поддержка 61IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 61Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
referrerPolicyChrome Полная поддержка 51Edge Нет поддержки НетFirefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 38Safari Полная поддержка 11.1WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android Полная поддержка 52Opera Android Полная поддержка 41Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.2
relChrome Нет поддержки НетEdge Полная поддержка ДаFirefox Полная поддержка 61IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 61Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
targetChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 9Safari Полная поддержка 3.1WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3.1Samsung Internet Android Полная поддержка Да
typeChrome Нет поддержки НетEdge Полная поддержка ДаFirefox Полная поддержка 61IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 61Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
xlink:actuate
Устаревшая
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
Устаревшая
Chrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 9Safari Полная поддержка 3.1WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3.1Samsung Internet Android Полная поддержка Да
xlink:show
Устаревшая
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:title
Устаревшая
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах