<a>

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

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

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

Атрибуты

download

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

href

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

hreflang

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

ping Экспериментальная функция

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

referrerpolicy

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

rel

Отношение целевого объекта к объекту ссылки. Тип значения: <list-of-Link-Types>; Значение по умолчанию: нет; Анимируемый: нет

target

Место отображения связанного URL-адреса. Тип значения: _self | _parent | _top | _blank | <XML-Name>; Значение по умолчанию: _self; Анимируемый: да

type

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

xlink:href Устарело

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

Интерфейс DOM

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

Пример

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

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

/* 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;
}

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

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

См. также

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