CSS svg transition

vscode에서 svg 편집 플러그인 깔기

svg이미지에 클릭 이벤트를 주는 방법

1. svg를 img태그가 아닌 object태그로 넣기

html

<object class="key" data="./images/key.svg" type=""></object>

object태그로 넣으면 개발자 도구에서 svg내부 코드를 확인할 수 있음

2. svg 파일을 열어서 수정하기

• 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>
    </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>
  </script>
</svg>

viewBox 속성: 4개의 숫자 중에서 첫번째와 두번째 숫자는 왼쪽 위
(x,y)의 좌표를의미하고 세번째와 네번째 숫자는 오른쪽 아래의 좌표(width, height)를 의미함.

defs 태그: 스타일 정의, 그라디언트, 클리핑 등 스타일 선언 후 g태그 내부 코드들에 적용할 수 있음.

script태그: 내부에 javascript로 svg에 이벤트를 적용할 수 있음.

• svg파일 내부에 style 코드 수정하기

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

.key-blade-flipped {
	transform: rotate(0deg);
}

• javascript로 클릭 이벤트 주기

const keyBtnElement = document.querySelector('.key-btn');
const bladeElement = document.querySelector('.key-blade');
keyBtnElement.addEventListener('click', e => {
	bladeElement.classList.toggle('key-blade-flipped');
});

보통의 트랜지션 작업하듯이 작업하면 됨.

• key.svg 동작 확인
  

<참고 사이트>
인프런 1분코딩-웹 애니메이션의 새로운 표준, Web Animations API