SVG <defs> 요소

SVG <defs> 요소는 SVG 이미지 내에서 재사용할 수 있는 정의를 삽입하는 데 사용됩니다. 예를 들어, SVG 형상을 그룹화하여 단일 형상으로 반복 사용할 수 있습니다.

defs 예제

이것은 간단한 <defs> 요소 예제입니다：

<svg>
　　　　<defs>
　　　　　　　　<g>
　　　　　　　　　　　　<rect x="100"y="100"width="100"height="100"　/>
　　　　　　　　　　　　<circle cx="100"cy="100"r="100"　/>
　　　　　　　　</g>
　　　　</defs>
</svg>

SVG에서 <defs> 요소에 정의된 형상은 SVG 이미지에 표시되지 않습니다. 표시하기 전에, <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>

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

<use> 요소는 그 x와 y 속성을 통해 반복 사용할 형상이 어디에 표시될지 지정합니다.请注意，<g> 요소 내부의 형상은 0,0에 위치합니다. 이렇게 하는 이유는 그 위치가 <use> 요소에 지정된 위치에 추가되기 때문입니다.

실행된 후 이미지 효과:

파란 점은 예제에 없습니다. 두 개의 <use> 요소의 x와 y를 표시하기 위해 추가했습니다.

defs 요소에서 정의할 수 있는 요소는 무엇인가요?

다음 요소를 <defs> 요소에 넣을 수 있습니다:

• 모든 형상 요소(rect, line 등)

• g

• symbol