<a>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

<a> SVG 요소는 다른 웹 페이지, 파일, 같은 페이지의 위치, 이메일 주소 또는 기타 URL에 대한 하이퍼링크를 생성합니다. HTML의 <a> 요소와 매우 유사합니다.

SVG의 <a> 요소는 컨테이너이므로 HTML과 같은 텍스트 주위에 링크를 만들 수 있고, 모든 모양 주위에도 링크를 만들 수 있습니다.

예제

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 또는 querySelectora를 선택하면 잘못된 요소를 선택할 수 있습니다. 둘을 구분하려면 @namespace 규칙을 사용해 보세요.

속성

download

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

href

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

hreflang

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

ping Experimental

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

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

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

type

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

xlink:href 지원이 중단되었습니다

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

전역 속성

코어 속성

특히: id, lang, tabindex

스타일 속성

class, style

조건부 처리 속성

특히: requiredExtensions, systemLanguage

이벤트 속성

전역 이벤트 속성, 문서 요소 이벤트 속성, 그래픽 이벤트 속성

프레젠테이션 속성

특히: 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:title

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

사용 참고 사항

명세서

Specification
Scalable Vector Graphics (SVG) 2
# AElement

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
a
download
href
hreflang
ping
Experimental
referrerpolicy
no-referrer-when-downgrade
origin-when-cross-origin
unsafe-url
rel
systemLanguage
target
type
xlink:actuate
Deprecated
xlink:href
Deprecated
xlink:show
Deprecated
xlink:title
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.