SVG 하이퍼링크

SVG 컨텐츠 요소에 하이퍼링크를 설정하는 것은 HTML과 유사합니다. 한가지 차이점은 일부 속성에 xlink 네임스페이스를 사용한다는 것입니다.

xlink 네임스페이스 속성

네임스페이스를 사용하는 속성은 HTML <a> 요소의 href, title 속성 앞에 xlink: 접두사가 붙는다고 생각하면 기억하기 쉽습니다. 설정 가능한 속성은 이외에도 target 속성이 있습니다.

속성

설명

xlink:href

사용자 인터랙션에 따라 연결된 웹 URL로 이동합니다.

xlink:title

마우스가 텍스트 위에 올라가면 타이틀을 툴팁으로 제공합니다.

<svg>
  <a 
    xlink:href="https://a11y.gitbook.io/graphics-aria" 
    xlink:title="AOA - 그래픽스 아리아(새 탭)"
    target="_blank">
    <text x="30%" y="55%" font-size="20">Graphics ARIA</text>
  </a>
</svg>
xlink 속성이 설정된 SVG 하이퍼링크 요소
키보드 포커스 상태의 SVG 하이퍼링크 요소

텍스트가 아닌 SVG 그래픽을 <a> 요소로 감싸 하이퍼링크 설정할 수도 있습니다.

<a> 요소로 감싸진 SVG 그래픽 요소

PreviousSVG 요소의 쌓이는 순서NextSVG 텍스트

Last updated