원모양으로 회전하는 텍스트 Circular text happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 이미지 > 원모양으로 회전하는 텍스트 Circular text 상세정보

클라우드태그

javascript

PHP

ASP

CSS

HTML

mysql

jquery

image

API

Mobile

메뉴

slide

게시판

현재접속자 명

원모양으로 회전하는 텍스트 Circular text

해피팀

네티즌

소스분류

이미지

다운로드 횟수

7 회

간단설명

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