<a>

<a> SVG 元素创建一个指向其他网页、文件、同一页面中的位置、电子邮件地址或任何其他 URL 的超链接。它与 HTML 的 <a> 元素非常相似。

SVG 的 <a> 元素是一个容器，这意味着您可以围绕文本（如在 HTML 中）以及任何形状创建链接。

示例

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

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 的 <a> 元素共享其标签名称，因此使用 CSS 或 querySelector 选择 a 可能会应用到错误类型的元素。尝试使用 @namespace 规则来区分两者。

属性

下载: 指示浏览器下载 URL 而不是导航到它，因此系统会提示用户将其保存为本地文件。值类型：<string>；默认值：无；可动画：否
href: 超链接指向的 URL 或 URL 片段。值类型：<URL>；默认值：无；可动画：是
hreflang: 超链接指向的 URL 或 URL 片段的人类语言。值类型：<string>；默认值：无；可动画：是
ping 实验性功能: 当遵循超链接时，浏览器将在后台发送具有主体 PING 的 POST 请求的 URL 列表（以空格分隔）。通常用于跟踪。有关解决相同用例的更广泛支持的功能，请参阅 Navigator.sendBeacon()。值类型：<list-of-URLs>；默认值：无；可动画：否
referrerpolicy: 获取 URL 时要发送哪个 referrer。值类型：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>；默认值：无；可动画：是
目标: 在何处显示链接的 URL。值类型：_self|_parent|_top|_blank|<name>；默认值：_self；可动画：是
类型: 链接 URL 的 MIME 类型。值类型：<string>；默认值：无；可动画：是
xlink:href 已弃用: 超链接指向的 URL 或 URL 片段。对于旧版浏览器，可能需要向后兼容。值类型：<URL>；默认值：无；可动画：是

使用上下文

类别	容器元素
允许的内容	任意数量的以下元素，以任意顺序动画元素描述性元素形状元素结构元素渐变元素 `<a>`、`<clipPath>`、`<cursor>`、`<filter>`、`<font>`、`<font-face>`、`<foreignObject>`、`<image>`、`<marker>`、`<mask>`、`<pattern>`、`<script>`、`<style>`、`<switch>`、`<text>`、`<view>`

规范

规范
可缩放矢量图形 (SVG) 2 # 链接

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

xlink:title 属性
HTML <a> 元素