연결 및 보기

SVG를 사용하면 SVG 콘텐츠에서 다른 페이지 및 미리 정의된 SVG 문서 보기에 연결할 수 있습니다. 보기는 다이어그램 근접 보기 등에 직접 연결하려는 경우에 유용합니다.

Windows Internet Explorer 9은 SVG 1.1(버전 2) 사양의 연결(영문) 모듈에 지정된 대로 SVG 연결 및 보기를 새롭게 지원했습니다. 여기에는 aview 요소에 대한 지원도 포함됩니다.

연결 모듈에 연결된 DOM 인터페이스(SVGAElementSVGViewElement)도 지원됩니다.

연결

HTML과 마찬가지로, a 요소는 SVG에서 하이퍼링크를 만드는 데 사용됩니다. 예를 들어 다음 태그는 사각형에 하이퍼링크를 제공합니다.


<svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

 <a xlink:href="http://www.bing.com" target="_blank">
    <rect x="20" y="20" width="250" height="250"/>
 </a>

 </svg>

보기

보기를 사용하여 SVG 이미지를 특정 방식으로 표시하도록 브라우저에 지시할 수 있습니다. 예를 들어 다음 태그는 보기에 대한 링크를 정의합니다.


...
 <a xlink:href="#rect-view">
    <text x="320" y="70" style="fill:red">Go to Rectangle</text>
 </a>
 <view id="rect-view" viewBox="280 245 135 85" />
 <rect id="rect-object" style="fill:red" x="280" y="245"
  width="135" height="85"/>
 ...

이 예제에서 rect-view 보기는 주어진 좌표를 사용한 viewBox로 정의됩니다. 링크("Go to Rectangle" 텍스트)를 클릭하면 빨간색 사각형을 표시하는 rect-view 보기가 나타납니다.

다음 태그는 보기에 대한 다른 링크를 정의합니다.


...
 <a xlink:href="#circle-view">
    <text x="250" y="70" style="fill:blue">Go to Circle</text>
 </a>
 <view id="circle-view" viewBox="5 36 128 115"
  preserveAspectRatio="none"/>
 <circle id="circle-object" style="fill:blue" cx="70" cy="85"
  r="45"/>
 ...

이 예제에서는 circle-view 보기의 preserveAspectRatio 특성이 none으로 설정되었습니다. 즉, 모양이 원인 경우에도 보기를 호출할 때 지정한 viewBox 사각형을 채우기 위해 균일하게 크기가 조정되지 않습니다. 대신, 경계 상자가 viewBox 사각형과 정확하게 일치하도록 균일하지 않게 확대됩니다. 이 태그는 페이지를 처음 로드할 때 Internet Explorer 9에서 다음과 같이 나타납니다.

"Go to Circle" 텍스트가 포함된 파란색 SVG 원

"Go to Circle"을 클릭하면 circle-view 보기가 호출되고 원이 viewBox 사각형을 채우기 위해 확대됩니다. 따라서 원이 타원처럼 표시됩니다.

큰 파란색 SVG 타원

관련 항목

SVG

 

 

표시:
© 2014 Microsoft