똑같은 삽질은 2번 하지 말자

SVG의 특정 부분에 이벤트 적용하기 본문

카테고리 없음

SVG의 특정 부분에 이벤트 적용하기

곽빵 2023. 7. 28. 14:36

개요

SVG 특정 부분의 클릭하면 SVG의 특정 부분이 변하는 이벤트 구현하기

 

목표

이런 SVG 이미지가 있고 동그란 부분을 클릭하면 위의 막대기가 시계반대방향으로 회전하면서 접히는 애니메이션을 구현하고자 한다.

 

처음 알게된 사실인데 svg파일에 script 태그를 바로 작성하는 것도 가능하다고 한다. 다만 script를 사용하는 svg파일을 불러올 때는 img태그가 아니라 object태그를 이용해야 한다는 것이다.

 

우선 SVG파일에 밑과 같이 스크립트를 작성해준다.

 

key.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg class="key" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.87 486.05">
	<defs>
		<style>
			.cls-1 {
				fill: #231815;
			}

			.cls-2 {
				fill: #353535;
			}

			.cls-2, .cls-3, .cls-4 {
				stroke: #231815;
				stroke-linecap: round;
				stroke-linejoin: round;
				stroke-width: 10px;
			}

			.cls-3 {
				fill: #d3d3d3;
			}

			.cls-4 {
				fill: none;
			}

			.key-btn {
				cursor: pointer;
			}

			.key-blade {
				transform: rotate(-180deg);
				transform-origin: 211.89px 213.45px;
				transition: 0.3s;
			}

			.key-blade-flipped {
				transform: rotate(0deg);
			}
		</style>
	</defs>

	<g>
		<path class="key-blade cls-3" d="M223.23,20.53h-22.68c-6.26,0-11.34,5.08-11.34,11.34V213.28s45.35,0,45.35,0V31.87c0-6.26-5.08-11.34-11.34-11.34Z"/>
		<path class="cls-2" d="M349.01,167.61H218.22c-30.28,0-54.82,24.54-54.82,54.82v220.05c0,11.27,9.13,20.4,20.4,20.4h130.8c30.28,0,54.82-24.54,54.82-54.82V188.02c0-11.27-9.13-20.4-20.4-20.4Z"/>
		<circle class="key-btn cls-1" cx="211.89" cy="213.45" r="22.68"/>
	</g>

	<script>
		const keyBtnElement = document.querySelector('.key-btn');
		const bladeElement = document.querySelector('.key-blade');
		keyBtnElement.addEventListener('click', e => {
			bladeElement.classList.toggle('key-blade-flipped');
		});
	</script>
</svg>
  • key-blade-flipped라는 클래스로 애니메이션 효과를 줄 클래스를 만든다.
  • transform-origin이라는 속성은 변형(transform)을 줄 기준점을 말하는 것이다.
  • script태그는 그냥 일반 html 파일에서 작성하는 것과 같이 script 블록안에서 작성해 주면 된다.

 

index.html

<body>
	<object class="key" data="images/key.svg" type="image/svg+xml"></object>
</body>

 

이렇게 하면 밑의 영상과 같은 효과를 만들어 낼 수 있다.

화면 기록 2023-07-28 14.22.00.mov
0.42MB

 

출처

웹 애니메이션의 새로운 표준, Web Animations API라는 인프런 강의

Comments