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

카테고리	컨테이너 요소
허용된 콘텐츠	순서에 상관없는 다음 요소 중 임의의 개수: 애니메이션 요소 설명 요소 모양 요소 구조 요소 그라데이션 요소 `<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

예제

속성

전역 속성

사용 참고 사항

명세서

브라우저 호환성