SVG 하이퍼링크

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

xlink 네임스페이스 속성

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

속성	설명
xlink:href	사용자 인터랙션에 따라 연결된 웹 URL로 이동합니다.
xlink:title	마우스가 텍스트 위에 올라가면 타이틀을 툴팁으로 제공합니다.

SVG <a> 마크업

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

CSS 스타일링

svg a {
  cursor: pointer;
  transition: all 0.4s ease;
}

svg a:hover {
  fill: #448aff;
}

xlink 속성이 설정된 SVG 하이퍼링크 요소

키보드 포커스 상태의 SVG 하이퍼링크 요소

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

<svg width="500" height="400">
  <a 
    xlink:href="https://a11y.gitbook.io/graphics-aria" 
    xlink:title="AOA - 그래픽스 아리아(새 탭)"
    target="_blank">
    <svg x="130" y="50" width="215" height="274" viewBox="0 0 215 274">
      <g>
        <path class="stems" fill="none" stroke="#7AA20D" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M54.817,169.848c0,0,77.943-73.477,82.528-104.043c4.585-30.566,46.364,91.186,27.512,121.498" />
        <path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M134.747,62.926c-1.342-6.078,0.404-12.924,5.762-19.681c11.179-14.098,23.582-17.539,40.795-17.846 c0.007,0,22.115-0.396,26.714-20.031c-2.859,12.205-5.58,24.168-9.774,36.045c-6.817,19.301-22.399,48.527-47.631,38.028 C141.823,75.784,136.277,69.855,134.747,62.926z" />
      </g>
      <g>
        <path class="r-cherry" fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M164.836,193.136 c1.754-0.12,3.609-0.485,5.649-1.148c8.512-2.768,21.185-6.985,28.181,3.152c15.076,21.845,5.764,55.876-18.387,66.523 c-27.61,12.172-58.962-16.947-56.383-45.005c1.266-13.779,8.163-35.95,26.136-27.478   C155.46,191.738,159.715,193.485,164.836,193.136z" />
        <path class="l-cherry" fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M55.99,176.859 c1.736,0.273,3.626,0.328,5.763,0.135c8.914-0.809,22.207-2.108,26.778,9.329c9.851,24.647-6.784,55.761-32.696,60.78 c-29.623,5.739-53.728-29.614-44.985-56.399c4.294-13.154,15.94-33.241,31.584-20.99C47.158,173.415,50.919,176.062,55.99,176.859z" />
      </g>
    </svg>
  </a>
</svg>

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