HTML5 SVG를 사용하여 다양한 눈송이 패턴 그리기-H5 튜토리얼-php.cn

이전 글에서는 HTML5+CSS3를 활용해 웃는 얼굴을 동적으로 그리는 방법을 소개해드렸는데요. 관심 있으신 분들은 링크를 클릭해 → "HTML5+CSS3를 활용해 웃는 얼굴을 동적으로 그리는 방법"을 읽어보실 수 있습니다. ". 이번에는 HTML5 SVG를 사용하여 패턴을 그리는 방법에 대해 계속 설명합니다.

오늘 기사의 주요 내용은 HTML5 svg를 사용하여 다양한 눈송이 패턴을 그리는 것입니다.

우선 svg가 무엇인지 알아볼까요?

SVG는 Scalable Vector Graphics의 약어입니다. XML로 모양을 지정하는 그래픽 형식입니다. 그런 다음 XML은 SVG 뷰어에 의해 렌더링됩니다. 오늘날 대부분의 웹 브라우저는 PNG, GIF 및 JPG를 표시할 수 있는 것처럼 SVG를 표시할 수 있습니다. SVG는 2차원 벡터 그래픽에 사용됩니다.

SVG 이미지는 벡터 이미지의 구조, 그리기 및 레이아웃에 적용되는 다양한 요소를 사용하여 생성됩니다. svg가 루트 요소가 아닌 경우 svg 요소를 사용하여 현재 문서(예: HTML 문서) 내에 별도의 svg 조각을 중첩할 수 있습니다. 이 독립 조각에는 자체 뷰포트와 좌표계가 있습니다.

HTML5 SVG를 이용하여 다양한 눈송이 패턴을 그리는 방법을 살펴보겠습니다.

먼저 전체 페이지의 배경색, svg 캔버스의 크기, 선의 색상을 설정하고,

body {
  background: #222;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
svg {
  width: 25vmin;
  height: 25vmin;
}
.stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

로그인 후 복사

그런 다음 svg를 사용하여 다양한 눈송이 패턴을 그려보세요

svg 태그를 정의하고 SVG 이미지의 루트 요소를 생성하고 현재 문서 내에 독립적인 SVG 조각을 중첩한 다음 여러 개의 태그를 사용하여 패턴 경로를 그립니다.
첫 번째 눈송이 패턴

<svg viewBox="-50 -50 100 100">
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(0)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(45)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(90)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(135)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(180)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(225)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(270)"></path>
  <path class="stroke" d="M0 0L1.2883721761263511 6.666666666666666L4.845864409444603 13.333333333333332L0.8659855037307029 20L4.088393461698764 26.666666666666664L0.8963464593503612 33.333333333333336L0 40L-0.8963464593503612 33.333333333333336,-4.088393461698764 26.666666666666664,-0.8659855037307029 20,-4.845864409444603 13.333333333333332,-1.2883721761263511 6.666666666666666Z" transform="rotate(315)"></path>
</svg>

로그인 후 복사