SVG 다루기(색상변경, 크기조정, keyframe 애니메이션)
📚 Today I Learned
- svg 이미지 다루기
- 색상변경
- 크기조정
- keyframe 애니메이션
🎨색상변경
1. style or fill 속성 사용
<div class="red">
<svg width="24" height="24" viewBox="0 0 24 24">
<path fill="red" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"/>
</svg>
</div>
<path>
태그에 style="fill:___"
속성을 사용하거나, 더 간단하게 fill="___"
속성을 사용하여 svg 이미지의 색상을 제어할 수 있다. 색상은 rgb형태, hex 값, 또는 색상의 이름을 직접 정의할 수도 있다.
style="fill:rgb(42,169,224)"
fill="#689edf"
fill="green"
2. css로 변경하기
html
<div class="img-box">
<svg width="24" height="24" viewBox="0 0 24 24">
<path class="green" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"/>
</svg>
</div>
css
.img-box .green {
fill: green;
}
<path>
에 class
를 주고 css로 색상을 변경할 수 있다.
📏크기조정
<div class="size-up">
<svg class="orange" width="100" height="100" viewBox="0 0 24 24">
<path fill="orange" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"/>
</svg>
</div>
svg 태그 내부에 width
와 height
속성을 명시하면 쉽게 크기를 조정할 수 있다.
단, svg의 크기를 조정할때는 width
와 height
뿐 아니라 viewbox
속성도 주의해야 한다.
viewbox
<svg class="orange" width="100" height="100" viewBox="0 0 24 24"
viewbox
는 svg 내부 요소의 좌표 영역과 비율, 뷰포트 내에서 이미지를 보여줄 위치를 설정하는 속성이고, min-x
, min-y
, width
, height
를 순서대로 받는다.
min-x
,min-y
: 왼쪽 위를 기준점으로 하는 뷰박스의 좌표width
,height
: 뷰박스의 가로세로 크기
해당 svg의 크기(viewport)와 viewbox
가 동일하다면 원래 크기와 동일한 요소가 보인다.
반면 viewport가 viewbox보다 작다면(viewport < viewbox) 축소되어 보이고,
viewport가 viewbox보다 크다면(viewport > viewbox) 확대되어 보인다.
🎬keyframe 애니메이션
html
<div class="stars">
<svg width="75" height="72" viewBox="0 0 75 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 3.23607L25.9883 15.5106L26.2128 16.2016H26.9393H39.8456L29.4042 23.7877L28.8164 24.2148L29.0409 24.9058L33.0292 37.1803L22.5878 29.5942L22 29.1672L21.4122 29.5942L10.9708 37.1803L14.9591 24.9058L15.1836 24.2148L14.5958 23.7877L4.15444 16.2016H17.0607H17.7872L18.0117 15.5106L22 3.23607Z" stroke="black" stroke-width="2"/>
<path d="M58.3214 25.4489L56.8777 34.2414L56.76 34.9584L57.4055 35.2919L65.3216 39.3819L56.5133 40.726L55.795 40.8356L55.6773 41.5525L54.2337 50.345L50.2335 42.3832L49.9073 41.734L49.1891 41.8436L40.3808 43.1876L46.7168 36.9229L47.2335 36.412L46.9073 35.7628L42.9071 27.801L50.8232 31.891L51.4687 32.2245L51.9853 31.7137L58.3214 25.4489Z" stroke="black" stroke-width="2"/>
<path d="M27.5897 50.2071L30.456 54.3513L30.8693 54.9488L31.5653 54.7404L36.3924 53.295L33.3368 57.3017L32.8962 57.8794L33.3095 58.4769L36.1758 62.6211L31.421 60.9532L30.7355 60.7127L30.2949 61.2904L27.2393 65.297L27.3563 60.2595L27.3731 59.5332L26.6875 59.2927L21.9327 57.6247L26.7598 56.1793L27.4559 55.9709L27.4727 55.2446L27.5897 50.2071Z" stroke="black" stroke-width="2"/>
</svg>
</div>
css
.stars path {
stroke-dasharray: 136;
stroke-dashoffset: 0;
animation: pathAni 5s linear infinite;
}
@keyframes pathAni {
0% {
stroke-dashoffset: 136;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -136;
}
}
1. stroke-dasharray로 svg에 간격 주기
stroke-dasharray
는 선을 대쉬 형태로 만든다.
path의 길이가 100이고 dasharray가 50이라면 이 그림은 절반만 보이게 된다. 따라서 svg를 모두 보이게 하기 위해 dasharray를 path의 전체 길이와 같은 값을 준다.
같은 값을 구하는 방법은 다음과 같다.
<script type="text/javascript">
path = document.querySelector('path').getTotalLength();
console.log(path);
//172.18614196777344
</script>
2. stroke-dashoffset으로 svg를 나타낼 지점 정하기
stroke-dashoffset
은 이 svg가 어느 지점에서부터 시작할지 정해주는 속성이다.
dashoffset이 50일때
dashoffset이 90일때
3. 애니메이션 넣기
@keyframes pathAni {
0% {
stroke-dashoffset: 136;
/* 136지점부터 보여줌 (안보임) */
}
50% {
stroke-dashoffset: 0;
/* 0부터 보여줌 (모두 보임) */
}
100% {
stroke-dashoffset: -136;
/* -136부터 보여줌 (반대로 그려짐) */
}
}
📝
svg를 예전에 공부했을때는 꽤 어려웠었는데 지금은 그때 느꼈던 것만큼 아주 어렵지는 않은 것 같다. 그래도 이렇게 배운 부분을 잘 정리해두니 조금 더 이해가 잘 되는 것 같다.
Author And Source
이 문제에 관하여(SVG 다루기(색상변경, 크기조정, keyframe 애니메이션)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nowyeh/SVG-다루기색상변경-크기조정-keyframe-애니메이션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)