SVG symbol

<symbol>

<symbol>요소는 템플릿 객체를 정의하는데 사용됩니다. 다수의 <symbol><use>요소로 인스턴스화 할 수 있습니다. <symbol>은 너비와 높이를 바꿀 수 없습니다. viewbox를 작성하면 속성을 변경 할 수 있습니다.

위 코드와 같이 <symbol>태그안에 있는 요소들은 랜더링 되지 않았고 <use>태그를 통해 참조하여 1개의 도형만 작성되었습니다. <use>태그에서 widthheight를 지정하게 되면 참조된 <symbol>태그의 크기는 변하지 않고 크기를 유지하게 됩니다. 따라서 <symbol>태그에서 선언한 도형보다 작게 되면 위 예제와 같이 짤리게 됩니다.

위 코드와 같이 <symbol>태그에서 viewbox를 지정하게 되면 <use>태그에서 지정한 widthheight의 비율만큼 맞춰지게 됩니다.

공유하기