SVG 링크
SVG 링크 – <a>
<a> 요소는 링크를 만드는 데 사용한다.
<a> 요소는 텍스트와 그래픽 모두에 사용할 수 있다.
<a> 요소는 7가지 기본 속성을 가진다.
| 속성명 | 설명 |
|---|---|
| href | 이동할 URL. |
| download | 브라우저에게 해당 URL로 이동하는 대신 다운로드하도록 지시한다. |
| hreflang | 링크가 가리키는 페이지의 언어. |
| referrerpolicy | URL을 가져올 때 보낼 리퍼러. |
| rel | 링크 대상 객체와 링크 객체의 관계. |
| target | 링크를 어디서 열지 지정한다. _self, _parent, _top, _blank 또는 이름을 사용할 수 있다. |
| type | 링크된 URL의 MIME 타입. |
텍스트 하이퍼링크
<a> 요소를 사용하여 텍스트를 링크로 만든 예제다.
<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
<a href="https://www.w3schools.com/graphics/" target="_blank">
<text x="5" y="15" fill="red">I love SVG!</text>
</a>
</svg>코드 설명:
- href 속성은 이동할 URL을 정의한다.
- target 속성은 링크를 어디서 열지 정의한다. (여기서는 링크가 새 창/탭에서 열린다)
그래픽 하이퍼링크
<a> 요소를 사용하여 원을 링크로 만든 예제다.
<svg height="100" width="200" xmlns="http://www.w3.org/2000/svg">
<a href="https://www.w3schools.com/graphics/" target="_blank">
<circle r="45" cx="50" cy="50" fill="red" />
</a>
</svg>참고
W3C School - SVG Links - <a>
