SVG 튜토리얼

SVG 요소

SVG <a> 요소

SVG의 앵커 요소( <a>)를 사용하여 히트링크를 정의합니다. SVG <a> 요소는 SVG 이미지에서 링크를 생성하며, SVG 링크는 HTML 링크와 같이 작동합니다.

간단한 예제:

예제

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a xlink:href="/svg/svg-tutorial.html
　　　　　　　　<text x="10" y="20">/svg/svg-tutorial.html/text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" xlink:show="new">
　　　　　　　　<text x="10" y="40">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="new")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" xlink:show="replace">
　　　　　　　　<text x="10" y="60">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="replace")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" target="_blank">
　　　　　　　　<text x="10" y="80">m/svg/svg-tutorial.html
　　　　　　　　　(target="_blank")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" target="_top">
　　　　　　　　<text x="10" y="100">/svg/svg-tutorial.html
　　　　　　　　　(target="_top")</text>
　　　　</a>
</svg>

테스트를 보세요‹/›

이는 결과 이미지입니다：

다음과 같이 설정할 수 있습니다-element xlink:show의 속성을 <a>에 new 또는 replace로 설정하여 링크가 지향하는 내용이 새 창에서 표시되거나 기존 창의 내용을 대체되는지 판단합니다.

SVG 이미지 iframe을 replace와 함께 사용하고 iframe을 표시할 경우 iframe이 링크의 대상이 되며, 브라우저 창이 아닙니다. 브라우저 창이 아닌 대상 창 iframe을 사용하고자 한다면, target 속성 값이 _top인 속성을 사용하세요.

target 속성을 설정하여 브라우저가 특정 프레임이나 특정 창에서 링크를 엽니다. targetHTML 링크 속성과 마찬가지로(이론적으로는 최소한). 브라우저는 속성 값에 대해 다른 방식으로 target을 해석합니다. 자세한 내용은 이 페이지의 마지막 부분을 참조하세요.

그래픽이 링크로 사용됩니다

그래픽도 링크로 사용할 수 있습니다. 필요한 것은 SVG 형태로 사용할 링크를 <a>와 </a> 태그 사이의 링크입니다. 이는 텍스트 대신 사각형을 사용하여 링크하는 예제입니다：

예제

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a xlink:href="/svg/index.html" target="_top">
　　　　　　　　<rect x="10" y="20" width="75" height="30"
　　　　　　　　　　　　　　　　style="stroke: #333366; fill: #6666cc"/>
　　　　</a>
　　　　
</svg>

테스트를 보세요‹/›

이는 결과 이미지입니다：

SVG <defs> 요소 SVG <textPath> 요소