<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> 元素