웹 개발을 위한 기본 SVG #1

나는 내 웹사이트에서 약간의 환상의 물건을 만들려고 노력했습니다. 예를 들어 원형 진행률 표시줄과 애니메이션 로고가 있습니다. 그런 다음 SVG가 솔루션이며 매우 유용하다는 것을 깨달았습니다. 그래서 저는 제 발견을 공유하고 싶습니다.

1. SVG가 필요한 이유는 무엇입니까?

순환 진행 막대를 만드는 방법을 찾고 있을 때 UI 디자인 프레임워크인 Antd가 SVG를 사용한다는 것을 알게 되었습니다. 그래서 웹 개발에서 SVG를 활용하는 방법을 연구했고 SVG에 유용한 기능이 많다는 것을 알게 되었습니다.

확장 가능합니다. 이것은 사람들이 많은 작품에서 그것을 사용하는 대중적인 이유 중 하나입니다.

CSS 선택기를 통해 해당 속성을 할당할 수 있습니다.

CSS에서 의사 클래스를 지원합니다. 예를 들어, Click 이벤트, Hover 이벤트.

CSS 전환 및 키프레임으로 애니메이션을 적용할 수 있습니다. 그래서 이것은 내가 가장 좋아하는 부분 중 하나입니다.

이제 본 포스팅의 핵심으로 넘어가겠습니다.

2. HTML로 SVG 코드를 작성하는 방법

먼저 HTML에서 SVG가 작동하는 방식을 이해하시기 바랍니다. 웹 사이트에 SVG 코드를 삽입하려는 경우. 도형이나 이미지를 그릴 수 있는 캔버스로 SVG 태그가 필요합니다. 자, 아래 코드를 보세요.

<svg height="100px" width="100px" veiwbox="0 0 100 100"></svg>

높이는 캔버스의 수직 길이입니다.

너비는 캔버스의 가로 길이입니다.

뷰박스는 도면에서 사용할 좌표와 단위를 계산하는 데 사용되는 일련의 숫자입니다.

3. 뷰박스 속성

이해를 돕기 위해 Viewbox 속성에 대해 자세히 설명하겠습니다.

<svg height="100px" width="100px" veiwbox="5 5 10 10"></svg>

위의 코드에서 우리는 캔버스 높이와 너비가 100px임을 알고 있습니다. 그러나 높이와 너비는 우리가 캔버스에 그릴 모양의 위치를 ​​설명하기에 충분하지 않습니다. 시스템에 캔버스의 위치를 ​​알려줄 때 위쪽에서 10px, 오른쪽으로 20px만큼 (10px, 20px)와 같은 것을 사용하기 때문입니다. 웹 좌표는 아래와 같기 때문입니다.



SVG 보기 상자 속성에서 시퀀스의 첫 번째 및 두 번째 숫자는 캔버스 좌표 원점의 위치 오프셋입니다. 예를 들어, 위의 코드에서 오프셋은 5와 5입니다. 즉, 좌표가 위쪽에서 5단위, 왼쪽에서 5단위 떨어져 있음을 의미합니다.



그럼 한 단위는 얼마나 될까요?

단위의 길이는 viewbox 속성의 마지막 두 숫자에서 계산할 수 있습니다. 첫 번째는 수평 단위의 수를 나타냅니다. 따라서 10이고 너비가 100px이면 너비의 단위는 10px이 됩니다. 두 번째는 수직 단위의 수를 나타냅니다. 그 계산은 첫 번째와 동일합니다.



이제 우리는 이미 캔버스를 설정하는 방법을 알고 있습니다. 그래서 이 글을 마치기 전에 어떤 모양을 그려보고자 합니다.

4. 서클

원은 첫 번째 기본 도형입니다. 보자

<svg height="100px" width="100px" veiwbox="5 5 10 10">
    <circle cx="2" cy="2" r="2"></circle>
</svg>

원을 그리기 전에 원의 중심이 어디인지 알아야 합니다. 그런 다음 "cx"및 "cy"속성을 정의할 수 있습니다. 그리고 "r"은 원의 반지름입니다.



이 게시물은 충분히 길다고 생각합니다. 다음 게시물에서는 더 많은 속성과 더 흥미로운 모양을 소개하겠습니다. 다음 포스트에서 뵙겠습니다.