[해피CGI][cgimall] 원모양으로 회전하는 텍스트 Circular text

 

<svg>를 이용하여 원모양으로 돌아가는 텍스트를 만들어 보실수 있습니다.

[svg 소스]

 

[주요 svg 요소]
1) <path d="..." id="textcircle_top"></path>
- <path>로 텍스트를 배치할 선을 만듭니다.

2)  <text>
         <textPath xlink:href="#textcircle_top">Sweet ~ Coding</textPath>
     </text>
-  <textPath>로 텍스트 요소를 감싸고 href 속성에 연결할 path id값을 넣는다.

3) <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 250 250" to="360 250 250" repeatCount="indefinite"></animateTransform>
- <animateTransform>으로 움직이는 애니메이션 효과를 준다.

svg 요소는 인터넷 익스플로어 및 일부 브라우저에서 지원하지 않습니다.
해당 소스를 활용하여 로딩화면에 돌아가는 이미지 등에 사용 해보실수 있을거 같습니다. ^^