SVG <use> 요소

SVG <use> 요소는 SVG 문서의 다른 위치(이미지 요소와 <g> 요소 및 <symbol> 요소 포함)의 SVG 형상을 재사용할 수 있습니다. 재사용할 형상은 <defs> 요소 내부(사용하기 전까지 형상이 보이지 않도록) 또는 외부에서 정의할 수 있습니다.

use 예제

이것은 <use> 요소의 간단한 예제입니다:

<svg　width="500"　height="100">
　　　　<defs>
　　　　　　　　<g id="shape">
　　　　　　　　　　　　<rect　x="0"　y="0"　width="50"　height="50"　></rect>
　　　　　　　　　　　　<circle cx="0" cy="0" r="50"　></circle>
　　　　　　　　</g>
　　　　</defs>
　　　　<use xlink:href="#shape" x="50"　y="50"　></use>
　　　　<use xlink:href="#shape" x="200"　y="50"　></use>
　　　　<circle cx="50"cy="50"r="5"style="fill:#0000ff;"></circle>
　　　　<circle cx="200"cy="50"r="5"style="fill:#0000ff;"></circle>
</svg>

이 예제는 <defs> 요소 내에 정의된 <g> 요소를 보여줍니다. 이렇게 하면 <g> 요소가 <use> 요소에 참조되지 않는 한 보이지 않습니다.

<g> 요소를 참조하기 전에, 그 ID 속성을 설정해야 합니다. <use> 요소는 xlink:href 속성을 통해 참조합니다. 속성 값에 ID 앞의 #을 주의하세요.

<use> 요소는 재사용할 형상이 표시될 위치를 x와 y 속성을 통해 지정합니다. 주의하십시오, <g> 요소 내의 형상은 0,0에 위치합니다. 이렇게 한 이유는 그 위치가 <use> 요소에 지정된 위치에 추가되기 때문입니다.

실행 후 이미지 효과:

파란색 점은 예제의 일부가 아닙니다. 그들을 추가한 이유는 두 개의 <use> 요소의 x와 y를 표시하기 위해서입니다.

defs 요소 외에서 형상 사용

<use> 요소는 SVG 이미지의 어떤 위치 요소도 재사용할 수 있습니다. 그 형상이 유일한 값의 id 속성을 가지고 있다면 됩니다. 다음은 예제입니다:

<svg　width="500"　height="110">　　　　
<g　id="shape2">　　　　
<rect　x="0"　y="0"　width="50"　height="50"　/>　　　　
</g>　　　　
<use　xlink:href="#shape2"　x="200"　y="50"　/>　　　　
<circle cx="200"cy="50"r="5"style="fill:#0000ff;"/>　　　　
</svg>

이 예제는 <rect> 요소를 포함한 <g> 요소를 정의한 것입니다. 그런 다음, <use> 요소를 통해 <g> 요소(포함된 <rect> 요소)를 재사용합니다.

실행 후 이미지 효과:

주의하십시오, 원래 형상과 재사용된 버전이 동시에 표시됩니다. 이런 일이 일어나는 이유는 <defs> 요소나 <symbol> 요소 내에 재사용할 형상(<g> 요소)을 정의하지 않았기 때문입니다. 따라서 그것은 보이게 됩니다.

또한, 파란색 점은 <use> 요소의 좌표를 표시합니다.

CSS 스타일 설정

原始의 형상에 CSS 스타일이 설정되지 않았다면, 재사용할 때 CSS 스타일을 설정할 수 있습니다. <use> 요소의 style 속성 내에 설정할 스타일을 지정하면 됩니다. 예제는 다음과 같습니다:

<svg　width="500"　height="110">
　　<g　id="shape3">
　　　　　　<rect　x="0"　y="0"　width="50"　height="50"　/>
　　</g>
　　<use　xlink:href="#shape3"　x="100"　y="50"　style="fill:　#00ff00;"/>
　　<use　xlink:href="#shape3"　x="200"　y="50"　style="stroke:　#00ff00;　fill:　none;"/>
</svg>

원래 형상에 style 속성이 설정되지 않았습니다. 그런 다음 기본 스타일(대체로 검은색)을 사용하여 렌더링합니다.