우리의 마음으로 SVG 심장을 필기합니다

발렌타인 데이가 여기에 있으며 손으로 그린 ​​마음보다 애정을 보여주는 더 좋은 방법은 무엇입니까? 이전에 CSS- 트릭은 다양한 하트 드로잉 기술을 선보였으며, 유쾌한 코드 펜 제출물을 고무 시켰습니다. 한 가지 예는 Temani Afif의 CSS Shapes 사이트입니다. CSS로만 만들어진 세련된 심장이 특징입니다. 보다 개인적인 손길을 위해 SVG 심장을 만들어 봅시다. 고급 벡터 소프트웨어가 필요하지 않습니다! 우리는 간단한 HTML 문서와

태그를 사용합니다 : .

우리의 창조물을 시각화하기 위해

속성을 ​​사용하겠습니다. 이것을 좌표로 정의한 드로잉 캔버스로 생각하십시오. 우리는 정사각형 뷰 박스를 설정합니다 :

<svg></svg> 이제, 그리자! 선 세그먼트를 사용하여 심장의 모양을 정의하기 위해 요소와 그 속성을 활용합니다. 주요 SVG 경로 명령은 Moveto (M, M), Lineto (L, L, L, H, H, V, V), Cubic Bézier Curves (C, C, S, S), 2 차 Bézier 곡선 (Q, Q, T, T, T), 타원형 아크 곡선 (A, A) 및 ClosePath (Z, Z)입니다. 이 마음의 경우, 우리는 Moveto와 Lineto에 집중할 것입니다. 우리는 좌표 (2,2)로 이동하여 시작합니다

다음으로, 우리는 (4,4)로 선을 그 다음 (6,2)로 그립니다.

<svg></svg>

이것은 거꾸로 삼각형을 만듭니다. 이 문제를 해결하려면 기본 필을 제거하고 스트로크를 추가하겠습니다.

더 나은 가시성을 위해 viewBox를 증가시키고 : 를 사용하여 둥근 끝을 추가하겠습니다.

그리고 거기에 당신은 그것을 가지고 있습니다-완벽하게 불완전하고 손으로 그린 ​​SVG 하트, 특별한 사람과 공유 할 준비가되어 있습니다! ?

위 내용은 우리의 마음으로 SVG 심장을 필기합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!