(react, animation) 글씨 구부려서 회전시키기

https://wsss.tistory.com/1507

원 모양의 텍스트 애니메이션 만들기

 

위 블로그를 참고하여 리액트에서 글씨 구부려서 회전시키기를 구현함.

처음엔 HTML, SCSS 코드를 그대로 활용하고, styled-components에서 animtaion 효과와 @keyframs spin 을 이용했다. 하지만 박스 전체가 움직이고 글씨는 구부려지지 않았는데...

 

HTML 부분이 svg 태그로 시작해 닫히길래 svg 파일을 만든 다음 임포트해봤지만, 제대로 반영되지 않았다.

다시, 페이지에 그대로 넣어봤더니, 오류가 떴다.

xmlns:

xlink:

등에서 오류가 발생했고, 3줄 정도에서 이 부분을 삭제하니 ... 원형으로 휘어져 돌아가는 글씨를 볼 수 있었다!! 꺅!

 

다시 컴포넌트 분리, 

아무튼 코드가 길기 때문에 분리는 필요하다고 판단했다. html 도 svg 도 아닌 js 파일로 컴포넌트를 분리했다. 

import React from "react";
function Textrotate() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 500 500"
    >
      <defs>
        <path
          d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250"
          id="textcircle_top"
        >
          <animateTransform
            attributeName="transform"
            begin="0s"
            dur="20s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite"
          />
        </path>
      </defs>
      <text dy="70" textLength="1250">
        <textPath href="#textcircle_top">돌릴 글자</textPath>
      </text>
    </svg>
  );
}

export default Textrotate;

 

//페이지에서 

<TextCircle>
  <Textrotate />
</TextCircle>
      
//styled-components 부분

const TextCircle = styled.div`
  margin: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    height: 160px;

    text {
      font-size: 33px;
      font-family: Helvetica Neue, sans-serif;
      font-weight: 500;
      text-transform: lowercase;
      letter-spacing: 21px;
      fill: #333;
    }
    animation: spin infinite 40s linear;
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
`;