[html/css] svg path text 사용법

[html/css] svg path text 사용법

 

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path id="MyPath" fill="none" stroke="red"
        d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

</svg>

 

위 샘플 소스에서 처럼

텍스트를 띄우고 싶은 svg path 의 아이디값을 

 

  <text>
    <textPath href="#MyPath">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

 

파란색 블럭 친 textPath href 자리에 넣어주면 됩니다.

 

참고들하세요!

 

 

출처 : developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath