<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 href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- 텍스트에 링크 -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle">&lt;circle&gt;</text>
  </a>
</svg>
```



```css
/\* SVG는 링크에 대한 기본 시각적 스타일을 제공하지 않으므로
 몇 가지를 추가하는 것이 가장 좋습니다. \*/

@namespace svg url(http://www.w3.org/2000/svg);
/\* HTML이 아닌 SVG <a> 요소만 선택하는 데 필요합니다.
 아래 경고 참조\*/

svg|a:link,
svg|a:visited {
  cursor: pointer;
}

svg|a text,
text svg|a {
  fill: blue; /\* 텍스트의 경우에도 SVG는 채우기 색상을 사용합니다.\*/
  text-decoration: underline;
}

svg|a:hover,
svg|a:active {
  outline: dotted 1px blue;
}
```


**경고:** 이 요소는 HTML의 `<a>` 요소와 태그 이름을 공유하므로 CSS 또는 `querySelector`로 `a`를 선택하면 잘못된 요소를 선택할 수 있습니다. 둘을 구분하려면 @namespace 규칙을 사용해 보세요.

속성
--

`download`

URL로 이동하는 대신 URL을 다운로드하도록 브라우저에 지시하여 사용자에게 로컬 파일로 저장하라는 메시지가 표시됩니다.
 값 유형: **<string>** ; 기본 값: 없음; 애니메이션 가능: **아니요**

`href (en-US)`

 하이퍼링크가 가리키는 URL 또는 URL 조각입니다.
 값 유형: **<URL> (en-US)** ; 기본값: 없음; 애니메이션 가능: **예**

`hreflang`

 하이퍼링크가 가리키는 URL 또는 URL 조각의 사람 언어입니다.
 값 유형: **<string>** ; 기본값: 없음; 애니메이션 가능: **예**

`ping` 
Experimental

 공백으로 구분된 URL 목록으로, 하이퍼링크를 따라갈 때 `PING` 본문이 포함된 `POST` 요청이 브라우저에서 전송됩니다(백그라운드에서). 일반적으로 추적에 사용됩니다. 동일한 사용 사례를 다루는 보다 광범위하게 지원되는 기능은 `Navigator.sendBeacon()`을 참조하십시오.
 값 유형: **<list-of-URLs> (en-US)** ; 기본값: 없음; 애니메이션 가능: **아니요**

`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 (en-US)`

 연결된 URL을 표시할 위치입니다.
 값 유형: `_self`|`_parent`|`_top`|`_blank`|**<name>** ; 기본 값: `_self`; 에니메이션 가능: **예**

`type`

 연결된 URL의 MIME 유형입니다.
 값 유형: **<string>** ; 기본 값: 없음; 에니메이션 가능: **예**

`xlink:href (en-US)` 
지원이 중단되었습니다

 하이퍼링크가 가리키는 URL 또는 URL 조각입니다. 이전 브라우저의 이전 버전과의 호환성을 위해 필요할 수 있습니다.
 값 유형: **<URL> (en-US)** ; 기본값: 없음; 애니메이션 가능: **예**

### 전역 속성

코어 속성 (en-US)

특히: `id (en-US)`, `lang (en-US)`, `tabindex (en-US)`

스타일 속성 (en-US)
`class (en-US)`, `style (en-US)`
조건부 처리 속성 (en-US)

특히: `requiredExtensions`, `systemLanguage (en-US)`

이벤트 속성

전역 이벤트 속성 (en-US), 문서 요소 이벤트 속성 (en-US), 그래픽 이벤트 속성 (en-US)

프레젠테이션 속성 (en-US)

특히: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill (en-US)`, `fill-opacity (en-US)`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke (en-US)`, `stroke-dasharray (en-US)`, `stroke-dashoffset (en-US)`, `stroke-linecap (en-US)`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform (en-US)`, `vector-effect (en-US)`, `visibility (en-US)`

XLink 속성

특히: `xlink:title (en-US)`

ARIA 속성

`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`

사용 참고 사항
--------

|  |  |
| --- | --- |
| 카테고리 | 컨테이너 요소 |
| 허용된 콘텐츠 | 순서에 상관없는 다음 요소 중 임의의 개수:애니메이션 요소설명 요소모양 요소구조 요소그라데이션 요소`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>` (en-US), `<image>` (en-US), `<marker>` (en-US), `<mask>` (en-US), `<pattern>` (en-US), `<script>` (en-US), `<style>` (en-US), `<switch>` (en-US), `<text>` (en-US), `<view>` (en-US) |

명세서
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Links |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.