a

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨julho de 2015⁩.

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

O elemento <a> do SVG cria um hiperlink para outras páginas da web, arquivos, locais na mesma página, endereços de email ou qualquer outra URL. É muito semelhante ao elemento <a> do HTML.

O elemento <a> do SVG é um contêiner, o que significa que você pode criar um link em torno do texto (como em HTML), mas também em torno de qualquer elemento.

@namespace svg url(https://www.w3.org/2000/svg);
html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="https://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(https://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;
}

Aviso: Como esse elemento compartilha seu nome de tag com o elemento <a> do HTML, selecionar a com CSS ou querySelector, pode ser aplicar ao tipo errado de elemento. Experimente usar a regra @namespace para distinguir os dois.

Attributes

download Experimental: Instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. Value type: <string> ; Default value: none; Animatable: no
href: The URL or URL fragment the hyperlink points to. Value type: <URL> ; Default value: none; Animatable: yes
hreflang: The human language of the URL or URL fragment that the hyperlink points to. Value type: <string> ; Default value: none; Animatable: yes
ping Experimental: A space-separated list of URLs to which, when the hyperlink is followed, POST requests with the body PING will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, see Navigator.sendBeacon(). Value type: <list-of-URLs> ; Default value: none; Animatable: no
referrerpolicy Experimental: Which referrer to send when fetching the URL. Value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Default value: none; Animatable: no
rel Experimental: The relationship of the target object to the link object. Value type: <list-of-Link-Types> ; Default value: none; Animatable: yes
target: Where to display the linked URL. Value type: _self|_parent|_top|_blank|<name> ; Default value: _self; Animatable: yes
type: A MIME type for the linked URL. Value type: <string> ; Default value: none; Animatable: yes
xlink:href Deprecated: The URL or URL fragment that the hyperlink points to. May be required for backwards compatibility for older browsers. Value type: <URL> ; Default value: none; Animatable: yes

Global attributes

Core Attributes: Most notably: id, lang, tabindex
Styling Attributes: class, style
Conditional Processing Attributes: Most notably: requiredExtensions, systemLanguage
Event Attributes: Global event attributes, Document element event attributes, Graphical event attributes
Presentation Attributes: Most notably: 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: Most notably: xlink:title
ARIA Attributes: aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Usage notes

Categorias	Elemento recipiente
Conteúdo permitido	Qualquer número dos seguintes elementos, em qualquer ordem: Elementos de animação Elementos descritivos Elementos de forma Elementos estruturais Elementos de gradiente `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Especificações

Specification
Scalable Vector Graphics (SVG) 2 # AElement

Compatibilidade com navegadores

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1 de jan. de 1970⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content