분류 Reactjs

React 개발자를 위한 SVG 소개

컨텐츠 정보

  • 조회 408 (작성일 )

본문

이 과정에서는 HTML, CSS 및 React의 기본 원칙에 익숙하지만 SVG에 대한 지식은 거의 없다고 가정합니다.


HTML과 CSS의 교묘한 조합은 알림 배지 및 화살표와 같은 간단한 그래픽을 만들기 위한 검증 된 솔루션입니다. 더 복잡한 것은 중첩 된 div 요소와 1 마일 길이의 CSS 규칙을 엉망으로 만들 수 있습니다.


https://able.bio/dbmzzo/intro-to-svg-for-react-developers--56cmmcy 


SVG가 도와 드리겠습니다.


간단한 글리프에서 복잡한 시각화에 이르기까지 SVG를 사용하여 추가 라이브러리나 도구 없이도 정확한 벡터 그래픽을 렌더링 하는 재사용 가능한 React 구성 요소를 만들 수 있습니다.


이 레슨에서는 매우 간단한 SVG 마크 업을 사용하여 다채로운 회전 로딩 표시기인 <Spinner /> React 구성 요소를 작성합니다.


웹에서 벡터 이미지의 파일 형식으로 SVG (Scalable Vector Graphics)에 대해 잘 알고 있을 수 있습니다. 여기서 jpg, gif 및 png 파일에 사용하는 것과 동일한 img 태그로 표시 할 수 있습니다.


<img src="image.svg"> 


텍스트 편집기로 SVG 파일을 연 적이 있다면 HTML과 매우 비슷하다는 것을 알게 될 것입니다. 실제로 SVG 코드는 HTML과 바로 섞일 수 있습니다. 다음은 유효한 페이지이며 회색 테두리가 있는 100 픽셀 너비의 파란색 원 이미지를 렌더링 합니다.


<!DOCTYPE html> <html> <head> <title>SVG</title> </head> <body> <svg viewBox="0 0 100 100" width="100"> <circle fill="lightblue" stroke="darkgray" cx="50" cy="50" r="45"/> </svg> </body> </html> 


이 원은 스피너에게 좋은 출발점입니다.


스피너 컴포넌트 생성 


위 코드에서 SVG를 가져 와서 기본 React 컴포넌트로 바꾸어 봅시다. 그 과정에서 strokeWidth 속성을 추가하여 원의 외곽선을 약간 두껍게 만들어 보겠습니다.


import React from 'react'; function Spinner() { return ( <svg viewBox="0 0 100 100" width="100"> <circle fill="lightblue" stroke="darkgray" strokeWidth="4" cx="50" cy="50" r="45"/> </svg> ); } export default Spinner; 


아마 유추 할 수 있듯이 원 태그의 속성 cx와 cy는 원 중심의 좌표이고 r은 원의 반지름입니다.


참고 : 분명하지 않은 것은 svg 요소의 viewBox 속성입니다. viewBox를 사용하여 SVG의 좌표 공간을 설정합니다. 이 경우 왼쪽 위 모서리는 처음 두 숫자 0 0으로 지정되고 오른쪽 아래 두 번째 숫자 100 100으로 지정됩니다. 이는 svg의 너비와 높이가 100 단위이고 svg의 중심이 50 50. viewBox 값을 조정하고 이미지가 어떻게 바뀌는지 확인하십시오. 


더 많은 도형 추가 


스피너는 회전 할 무언가가 필요합니까? 자 더 많은 모양을 만들어 봅시다!


<circle> 요소 아래에 반투명 흰색 사각형을 추가하십시오. rect의 속성은 매우 간단하지만 비정상적인 strokeOpacity 속성을 발견했을 수 있습니다. SVG를 사용하여 HTML과 마찬가지로 전체 불투명도를 설정할 수 있을 뿐만 아니라 셰이프 채우기 및 획에 대해 독립적인 불투명도 값을 설정할 수 있습니다. 힘을 느껴라!


<rect x="25" y="25" width="50" height="50" stroke="darkgray" fill="white" fillOpacity=".5" strokeWidth="4"/> 


다음으로 녹색 육각형을 추가합시다. SVG로 그리기의 힘이 순수한 HTML과 CSS로 달성 할 수 있는 것을 뛰어 넘기 시작하는 곳입니다.


points 속성은 단순히 다각형의 모서리에 해당하는 점의 목록입니다.


<polygon points="63,57.5 50,65 37,57 37,42.5 50,35 63,42.5" fill="lightgreen" strokeWidth="4" stroke="darkgray" /> 


쉬운! 포인트 속성에서 새로운 숫자를 변경, 제거 또는 추가하여 어떻게 되는지 확인하십시오.


이제 구성 요소가 회전 할 모양이 있지만 회전하기 전에 SVG와 함께 CSS를 사용하여 삶을 편하게 만드는 방법에 대해 설명하겠습니다.


스타일 시트 


HTML과 마찬가지로 SVG는 CSS로 스타일을 지정할 수 있습니다. 채우기, 획 및 패스와 같은 속성을 스타일에 지정할 수 있으며 CSS 전환 및 애니메이션도 SVG에서 작동합니다.


우리의 도형에 className 속성을 추가하자 :


<circle className="spinner circle" fill="lightblue" strokeWidth="4" stroke="darkgray" cx="50" cy="50" r="45"/> <rect className="spinner rect" x="25" y="25" width="50" height="50" stroke="darkgray" fill="white" fillOpacity=".5" strokeWidth="4"/> <polygon className="spinner hex" points="63,57.5 50,65 37,57 37,42.5 50,35 63,42.5" fill="lightgreen" strokeWidth="4" stroke="darkgray" /> 


스타일 요소를 모양 요소와 스타일 시트로 이동하십시오.


.spinner { stroke: darkgray; stroke-width: 4; } .circle { fill: lightblue; } .rect { fill: white; fill-opacity: .5; } .hex { fill: lightgreen; } 


SVG 코드는 이제 다음과 같아야 합니다.


<circle className="spinner circle" cx="50" cy="50" r="45"/> <rect className="spinner rect" x="25" y="25" width="50" height="50" /> <polygon className="spinner hex" points="63,57.5 50,65 37,57 37,42.5 50,35 63,42.5" /> 


아, 훨씬 더 간결합니다. 자, 이제 그 스피너를 회전 시키십시오!


Animation 


스타일 시트에서 회전을 위한 간단한 CSS 애니메이션을 만듭니다.


@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } 


육각형에 애니메이션을 적용하십시오.


.hex { fill: lightgreen; animation: rotation 2s infinite; } 


흥미로운 점을 만들기 위해 동일한 애니메이션을 사각형에 적용하고 방향과 타이밍을 혼합 해 보겠습니다.


.rect { fill: white; fill-opacity: .5; animation: rotation 2s infinite alternate-reverse; } 


축하합니다. 이제 두 개의 회전 모양이 있는 애니메이션 SVG 구성 요소의 소유자입니다. 간단한 태그를 사용하여 React 앱의 어느 곳에 나 배치하십시오.


<Spinner /> 


Transform Origin 


SVG로 작업하는 것이 항상 간단한 것은 아니며, 필연적으로 두통을 유발하거나 머리를 긁을 수 있는 몇 가지 단점이 있습니다. 이러한 단점 중 하나는 SVG 셰이프에 적용된 변형의 원점과 관련이 있으며 셰이프가 중앙 대신 SVG의 왼쪽 상단에서 회전하고 있음을 알 수 있습니다. 이 경우 .spinner 클래스에 다음 코드를 추가하면 가장 일반적인 브라우저의 문제가 해결됩니다.

transform-origin: center; 


이 주제에 대한 철저한 조사를 위해 CSS Tricks 에서 이 기사를 확인하십시오.



SVG