목록 보기
SVG를 이용하여 Animation 만들기_후속
프론트엔드

SVG를 이용하여 Animation 만들기_후속

씨앤텍시스템즈
씨앤텍시스템즈
2023년 12월 28일

두줄요약

SVG의 `viewBox`, `viewport`, `preserveAspectRatio` 개념을 정리하고 `meet`와 `slice`의 동작 차이를 설명했습니다.\n크기 관계에 따라 정렬 기준이 어떻게 달라지는지 예시로 살펴보았습니다.

핵심 내용

  • SVG의 viewBoxviewport 개념 정리
  • preserveAspectRatio 속성의 역할과 meet, slice 동작 비교
  • viewport와 viewBox의 크기 관계에 따른 정렬 기준 변화
  • xMinYMin, xMidYMid, xMaxYMax 조합별 위치 차이 설명

적용해볼 점

  • SVG 아이콘과 애니메이션에서 비율 유지 방식 점검
  • meetslice 조합으로 화면 크기별 배치 의도 반영

다음 읽기

#SVG 주제를 이어서 읽기

SVG를 이용하여 Animation 만들기

SVG 도형을 추출해 ID와 그룹 단위로 CSS 애니메이션을 적용하는 방법을 정리했습니다. hover 이동, 클릭 색상 변경, 순차 등장 애니메이션까지 구현 과정을 소개했습니다.

씨앤텍시스템즈
씨앤텍시스템즈
프론트엔드

댓글 0

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...