🔎SVG

• 백터 그래픽으로 이미지를 나타내는 방식
• HTML 태그의 집합으로 이루어져서 css와 javascript로 조작 가능

장점

• 아무리 확대를 해도 이미지가 깨지지 않음

단점

• 코드로 이루어진 이미지라 복잡한 이미지일수록 파일 사이즈 커짐
• 단순한 모양의 아이콘, 로고, 도형 등을 구현할 때 많이 사용

🎈SVG 활용해 스크롤 시 변화하는 페이지 만들기

💡피그마로 SVG 파일 만들기

• 피그마 툴로 원하는 그림을 그리고 SVG 파일로 export
  제가그린 이미지 ㅎㅎ
  코드에 적용

💡SVG 파일을 다루는 CSS 속성

stroke-dasharray

• 대시(이미지 선)길이와 공백길이 지정

예시

• SVG 이미지를 100px 그리고 20px 공백을 주는 형태로 반복

#line {
	stroke-dasharray: 100 20;
}

stroke-dashoffset

• 어느만큼 떨어진 곳에서 이미지를 그릴 지 지정
• stroke-dasharray 와 함께 사용

예시

• 전체 길이의 300px 만큼 떨어진 곳에서 그린다고 지정

#line {
	/* 전체 길이 2856px로 2856px 만큼 보이고 공백이게 설정 */
	stroke-dasharray: 2856 2856;
    stroke-dashoffset: 300;
}

• 아예 안보이게 하는 경우

#line {
	stroke-dasharray: 2856 2856;
    stroke-dashoffset: 2856;
}

• 전체 다 보이게 하는 경우

#line {
	stroke-dasharray: 2856 2856;
    stroke-dashoffset: 0;
}

💡스크롤의 위치에 따라 SVG 그리기

• 스크롤이 생기게 body의 height를 5000px로 설정
• getTotalLength() 를 사용해 SVG의 길이 가져와서 stroke-dasharray , stroke-dashoffset 속성 설정

const line = document.querySelector('#line');
const lineLength = line.getTotalLength();

line.style.strokeDasharray = lineLength + ' ' + lineLength;
line.style.strokeDashoffset = lineLength;

• scroll 이벤트가 발생하면 실행하는 함수 scrollHandler( ) 실행시킴
• scrollHandler( )
  스크롤이 가장 위에 위치할 때 아무것도 보이지 않다가 밑으로 내리면 그려짐
  스크롤이 가장 밑에 위치할 때 다 그려짐
• 스크롤된 위치를 전체 높이에서 %로 구하고 stroke-dashoffset 속성값을 바꿔주면서 구현

window.addEventListener('scroll', scrollHandler)

function scrollHandler() {
  // 현재 스크롤된 위치 까지의 높이값
  const scrollTop = document.documentElement.scrollTop;
  // 스크롤될 수 있는 전체 높이값
  const scrollHeight = document.documentElement.scrollHeight;
  // 화면(뷰포트)의 높이값
  const clientHeight = document.documentElement.clientHeight;

  // % 구하기
  // 전체가 scrollHeight - clientHeight인 이유
  // 스크롤할 수 있는 전체 높이값에서 현재 화면높이만큼 빼 줘야지 가장 밑의 스크롤까지 갔을 때 100%가 됨
  const scrollPercentage = scrollTop / (scrollHeight - clientHeight)
  // 스크롤 위치에 따른 길이 구해줌
  const drawLength = lineLength * scrollPercentage

  // stroke-dashoffset 속성값을 바꿔주면서 구현
  // 스크롤 가장 위일 때 : 원래길이 - 0 (아무것도 안보임)
  // 스크롤 가장 아래일 때 : 원래길이 - 원래길이 (전체 보임)
  line.style.strokeDashoffset = lineLength - drawLength
}

💡구현결과