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

<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: 하이퍼링크가 가리키는 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 속성: 특히: 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

사용 참고 사항

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

명세서

Specification
Scalable Vector Graphics (SVG) 2 # AElement

브라우저 호환성

BCD tables only load in the browser