<a>

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

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

Пример

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- A link around a shape -->
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- A link around a text -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle">&lt;circle&gt;</text>
  </a>
</svg>

css

/* As SVG does not provide a default visual style for links,
   it's considered best practice to add some */

@namespace svg url(http://www.w3.org/2000/svg);
/* Necessary to select only SVG <a> elements, and not also HTML's.
   See warning below */

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

svg|a text,
text svg|a {
  fill: blue; /* Even for text, SVG uses fill over color */
  text-decoration: underline;
}

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

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

Атрибуты

download: Указывает браузерам загрузить URL вместо перехода по нему, поэтому пользователя попросят сохранить его в качестве локального файла. Тип значения: <строка>; Значение по умолчанию: нет; Анимируемый: нет
href: URL или фрагмент URL, к которому указывает гиперссылка. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: да
hreflang: Язык отображения URL или фрагмента URL, к которому указывает гиперссылка. Тип значения: <строка>; Значение по умолчанию: нет; Анимируемый: да
ping Экспериментальный: Список URL, разделённых пробелами, к которым при переходе по гиперссылке будут отправлены запросы POST с телом PING. Обычно используется для отслеживания. Для более широко поддерживаемой функции, решающей те же задачи, см. Navigator.sendBeacon(). Тип значения: <список URL>; Значение по умолчанию: нет; Анимируемый: нет
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; Значение по умолчанию: нет; Анимируемый: нет
rel: Связь целевого объекта с объектом ссылки. Тип значения: <список типов ссылок>; Значение по умолчанию: нет; Анимируемый: да
target: Место отображения связанного URL. Тип значения: _self|_parent|_top|_blank|<имя>; Значение по умолчанию: _self; Анимируемый: да
type: Тип MIME для связанного URL. Тип значения: <строка>; Значение по умолчанию: нет; Анимируемый: да
xlink:href Устаревший: URL или фрагмент URL, к которому указывает гиперссылка. Может потребоваться для обратной совместимости со старыми браузерами. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: да

Контекст использования

Категории Элемент-контейнер

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

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

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

Спецификация
Scalable Vector Graphics (SVG) 2 # Ссылки

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

	Стационарные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`a`	1	12	1.5	9	3.1	18	4	14	2	1.0	3
`download`	Нет	Нет	20	Нет	Нет	Нет	20	Нет	Нет	Нет	Нет
`href`	50	12	51	37	12.1	50	51	37	12.2	5.0	50
`hreflang`	Нет	≤18–79	61	Нет	Нет	Нет	61	Нет	Нет	Нет	Нет
`ping`	Нет	Нет	61 Этот свойство доступно, но не имеет эффекта, если параметр `browser.send_pings` не установлен на `true`. См. баг 951104.	Нет	Нет	Нет	61 Это свойство доступно, но не имеет эффекта, если параметр `browser.send_pings` не установлен на `true`. См. баг 951104.	Нет	Нет	Нет	Нет
`referrerpolicy`	51	79	52	38	14	51	52	41	14	7.2	51
`rel`	Нет	≤18–79	61	Нет	14	Нет	61	Нет	14	Нет	Нет
`systemLanguage`	1	12	12	9	3.1	18	14	14	2	1.0	3
`target`	1	12	1.5	9	3.1	18	4	14	2	1.0	3

См. также

xlink:title атрибут
Элемент HTML <a>

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a