<a>

1. <a>
2. <defs>
3. <g>
4. <marker>
5. <mask>
6. <missing-glyph>
7. <pattern>
8. <svg>
9. <switch>
10. <symbol>
11. SVG 元素

    1. A
       1. <a>
       2. <altGlyph>
       3. <altGlyphDef>
       4. <altGlyphItem>
       5. <animate>
       6. <animateColor>
       7. <animateMotion>
       8. <animateTransform>
    2. B-C
       1. <circle>
       2. <clipPath>
       3. <color-profile>
       4. <cursor>
    3. D
       1. <defs>
       2. <desc>
    4. E
       1. <ellipse>
    5. F
       1. <feBlend>
       2. <feColorMatrix>
       3. <feComponentTransfer>
       4. <feComposite>
       5. <feConvolveMatrix>
       6. <feDiffuseLighting>
       7. <feDisplacementMap>
       8. <feDistantLight>
       9. <feFlood>
       10. <feFuncA>
       11. <feFuncB>
       12. <feFuncG>
       13. <feFuncR>
       14. <feGaussianBlur>
       15. <feImage>
       16. <feMerge>
       17. <feMergeNode>
       18. <feMorphology>
       19. <feOffset>
       20. <fePointLight>
       21. <feSpecularLighting>
       22. <feSpotLight>
       23. <feTile>
       24. <feTurbulence>
       25. <filter>
       26. <font>
       27. <font-face>
       28. <font-face-format>
       29. <font-face-name>
       30. <font-face-src>
       31. <font-face-uri>
       32. <foreignObject>
    6. G
       1. <g>
       2. <glyph>
       3. <glyphRef>
    7. H
       1. <hkern>
    8. I
       1. <image>
    9. J-L
       1. <line>
       2. <linearGradient>
    10. M
        1. <marker>
        2. <mask>
        3. <metadata>
        4. <missing-glyph>
        5. <mpath>
    11. N-P
        1. <path>
        2. <pattern>
        3. <polygon>
        4. <polyline>
    12. Q-R
        1. <radialGradient>
        2. <rect>
    13. S
        1. <script>
        2. <set>
        3. <stop>
        4. <style>
        5. <svg>
        6. <switch>
        7. <symbol>
    14. T
        1. <text>
        2. <textPath>
        3. <title>
        4. <tref>
        5. <tspan>
    15. U
        1. <use>
    16. V-Z
        1. <view>
        2. <vkern>

<a> SVG element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML’s <a> 元素。

SVG's <a> element is a container, which means you can create a link around text (like in HTML) but also around any shape.

范例

@namespace svg url(http://www.w3.org/2000/svg);

html,body,svg


{


height


:

100%

}


								

<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">
      <circle>
    </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;
}

								

警告： Since this element shares its tag name with HTML's <a> element , selecting a with CSS or querySelector may apply to the wrong kind of element. Try the @namespace rule to distinguish the two.

属性

download

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> ; 默认值 : none ; Animatable : no

href

URL or URL fragment the hyperlink points to. Value type : <URL> ; 默认值 : none ; Animatable : yes

hreflang

The human language of the URL or URL fragment that the hyperlink points to. Value type : <string> ; 默认值 : none ; Animatable : yes

ping

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> ; 默认值 : none ; Animatable : no

referrerpolicy

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 ; 默认值 : none ; Animatable : no

rel

The relationship of the target object to the link object. Value type : <list-of-Link-Types> ; 默认值 : none ; Animatable : yes

target

Where to display the linked URL . Value type : _self | _parent | _top | _blank | <name> ; 默认值 : _self ; Animatable : yes

type

A MIME 类型 for the linked URL. Value type : <string> ; 默认值 : none ; Animatable : yes

xlink:href

The URL or URL fragment that the hyperlink points to. May be required for backwards compatibility for older browsers. Value type : <URL> ; 默认值 : none ; Animatable : yes

全局属性

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

用法注意事项

规范

浏览器兼容性

BCD tables only load in the browser

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者