svg 를 활용한 글자곡선 만들기

<defs> : 그래픽, 마스크 , 그래디언트 등의 요소들을 담아두는 태그

참조할 <path>태그를 <defs>태그로 감싸준 후 id값 설정

> 하단에 참조할 <text> 태그의 위치를 잡아주고 path를 연결해줄 <textpath> 태그를 내부에 위치시킴

><textpath>에 앞서 설정한 <path> 태그의 id 값 설정

<svg class="svg" xmls = "http://www.w3org/2000/svg">
  <!--defs 참조할 그래픽,마스크,그래디언트 등을 담아두는 공간-->
  <defs>
     <path id="text-curve"d="M 50 400 C 50 400, 300 500, 400 400 C 400 400,600 170,700 300"></path> 
  </defs>

  <text x = "20" y = "50">
    <textPath href="#text-curve">
      Lorem <tspan class="blue">ipsum</tspan> dolor sit, amet consectetur adipisicing elit. Quaerat, natus obcaecati maxime volt numquam! Reprehenderit suscipit quam aliquam harum!
      </textPath>
  </text>
</svg>

body{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.svg{
  position:absolute;
  width:100%;
  height:100%;
  background:#ccc;
}

text{
  font-size:1.5rem;
  font-weight:800;
  fill:red;
}

path{
  stroke:red;
  fill:transparent;
}

.blue{
  fill:green;
}

codepen.io/fangmin/pen/gOmYQVG