image

svg <defs>, <use>

태그
Html
상세설명svg <defs>, <use> - 곡선 따라 글쓰기
작성일자2024.01.23

svg로 작업을 하던 중 <defs>,<use> 태그가 보여 알아보았다.

<defs>

  • 나중에 참조할 그래픽 요소 같은 것들을 담아놓는 공간

    • <defs>요소 내에 선언된 그래픽은 SVG 뷰포트에 렌더링 되지 않는다. 화면에 렌더링 하려면 <use> 요소를 통해 참조를 해야 하며 사용 방법은 앞서 다운 <use> 요소와 동일하다. <defs> 내부에 선언된 그래픽 요소의 id 속성을 <use> 요소의 xlink:href 속성을 통해 참조하여 문서 전체에서 사용할 수 있다

    <use>

    <use>요소는 문서 전반에 걸쳐 요소를 재사용 할 수 있다. x, y, width, height 속성을 사용해 설정이 가능하며, xlink:href 속성을 사용해 재사용 할 요소를 호출(식별자 ID 참조) 할 수 있다. 요소를 재사용 함으로서 제작 시간을 아낄 수 있고, 코드를 최소화 할 수 있다.

    기본 사용법

    곡선 따라 글쓰기

    관련 정보를 찾던 중 defs를 활용하여 곡선 따라 글을 쓸 수 있어 따라 해보았다.

    곡선을 path 로 그려도 되고 일러스트레이터에서 그려 코드를 받아서 사용 할 수 있다.

    ⭐ path에 텍스트를 어떻게 적용 방법

  • <path>를 참조해서 텍스트를 그려야하기 때문에,<defs></defs>태그 안에 <path /> 태그를 옮긴다.
  • <path /> id명 지정 후 <text></text> 안에 <textPath></textPath>를 넣은 후 <textPath></textPath> href="" 안에 <path /> id명과 동일한 값을 넣는다.

    • 참고

    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

    https://nyjchoi.tistory.com/15

    이전 포스트

    svg 태그

    다음 포스트

    svg <linearGradient>, <stop>, ...