[에스비지] SVG (Scalable Vector Graphics) -(03편)- JS적용하기
이전시간에 만들어 본 SVG로 얼굴을 만들어 봤다.
[에스비지] SVG (Scalable Vector Graphics) -(02편)- CSS적용하기 (feat. fill, transform-origin,nth-of-type)
https://blog.naver.com/nicholasdw/222225947902 [에스비지] SVG (Scalable Vector Graphics) -(02편)- CSS적용하기 (feat. fill, transform-origin,nth-of-type) #svg #scaralableVectorGraphics #확장가능벡터..
nyjchoi.tistory.com
전편 참고하시라.
지난번 시간에는 CSS로 애니메이션을 줘봤다면,
이번시간은 JavaScript로 이 움직임을 제어해보고자 한다.
이전시간 만든 것에서 JS만 추가 해서 움직임을 줄것이다.
face라는 클래스를 가진 svg 안에 아랫쪽에 script 태그를 넣어서 js를 작성해 주겠다.
꼭 안에 넣지 않아도 되고, svg 태그 바깥쪽 아래에 적어도 된다.
위 사진에서 얼굴 어느 곳이라도 클릭했을 때, 애니메이션 움직임을 주려고 한다.
그렇다면, face라는 클래스에 클래스를 추가해서 그 클래스가 들어가면 애니메이션이 움직이고,
클래스가 빠지면, 혹은 없으면 움직이지 않게 해주면 될 것이다.
먼저 css로 조정을 해주겠다.
지난 번에 한 것은
.cls-2.eyes{ } 여기에 animation 속성을 줬었다. animation: eyes .5s infinite alternate; 라고.
그럼 이 에니메이션을 이곳에 적지말고,
face라는 클래스에 새로운 클래스명을 추가해보자.
예를 들면 클릭했을때니까, clicked-on 이렇게.
그럼 현재 <svg class="face" ....... 이렇게 적혀 있는부분이 clicked-on 이 들어가면,
<svg class="face clicked-on" ........ 이런식으로 클래스가 붙을 것이다.
(직접 적는게 아니다. 자바스크립트로 들어가게끔 해줄것이다.)
그렇다면,
clicked-on 일때, eyes 라는 클래스들이 애니메이션을 가져 갈것이기에,
.clicked-on .eyes { animation: eyes .5s infinite alternate; } 라고 하거나,
.face.clicked-on .eyes { animation: eyes .5s infinite alternate; } 라고 하면 된다.
(클래스가 face인데 clicked-on 이기도 한 앨리먼트의 자식요소 중 클래스가 .eye 인 앨리먼트의 css)
그리고나서 script 안에는, 아래와 같이 적어준다.
document.querySelector('.face').addEventListener('click', function(){
this.classList.toggle('clicked-on');
});
face라는 클래스를 클릭했을 때, 그것의 클래스를 클릭할때 마다 넣었다 빼는
classList.toggle() 로 해주는 것이다.
넣기만 할거면, classList.add(클래스명')
빼기만 할거면, classList.remove('클래스명')
이다.
이것을 제이쿼리로 하면,
$('.face').click(function(){
$(this).toggleClass('clicked-on');
});
라고 적는 것과 같다.
제이쿼리도 잘 작동한다. 단! 제이쿼리 CDN이나 jquery 라이브러리 최신버전이 링크되어 있어야 한다.
그렇게 실행하면, 클릭하면 움직이고, 다시 클릭하면 움직임을 멈춘다.
클래스가 들어갔다(들어가면 움직임) 나왔다(클래스가 없어지면 안움직임) 하는 것이다.
아래는 전체코드이다. 참고하길.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
<svg class="face" id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.79 347">
<style>
<![CDATA[
.cls-4{fill:none;stroke:#231815;stroke-miterlimit:10}
.cls-2{fill:#231815}
.cls-4{stroke-width:5px}
.face {
width: 500px;
/* border: 1px solid #000; */
position: absolute;
/* 화면중앙정렬시키기 1번방법 */
/* left: 50%;
top: 50%;
transform: translate(-50%, -50%); */
/* 화면중앙정렬시키기 2번방법 */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.cls-2.hair {
fill: tomato;
}
.cls-2.eyes {
/* transform-origin: center center; */
}
.clicked-on .eyes{
animation: eyes 0.5s infinite alternate;
}
.cls-2.eyes:nth-of-type(2) {
transform-origin: 273.13px 162.94px;
}
.cls-2.eyes:nth-of-type(3) {
transform-origin: 154.13px 162.94px;
}
@keyframes eyes {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1.1);
}
}
]]>
</style>
<circle cx="213.63" cy="186" r="156" stroke-width="10" fill="none" stroke="#231815" stroke-miterlimit="10"/><circle class="cls-2 eyes" cx="273.13" cy="162.94" r="23.06"/><circle class="cls-2 eyes" cx="154.13" cy="162.94" r="23.06"/><path d="M301.36 240.03a100 100 0 01-175.47 0" stroke-linecap="round" stroke-width="11" fill="none" stroke="#231815" stroke-miterlimit="10"/><circle class="cls-2 hair" cx="85.83" cy="95.33" r="30"/><circle class="cls-2 hair" cx="109.83" cy="68.67" r="30"/><circle class="cls-2 hair" cx="133.83" cy="42" r="30"/><circle class="cls-2 hair" cx="169.83" cy="32.67" r="30"/><circle class="cls-2 hair" cx="203.83" cy="30" r="30"/><circle class="cls-2 hair" cx="243.63" cy="32.67" r="30"/><circle class="cls-2 hair" cx="280.07" cy="42" r="30"/><circle class="cls-2 hair" cx="310.07" cy="60" r="30"/><circle class="cls-2 hair" cx="336.07" cy="85.33" r="30"/><ellipse class="cls-4" cx="29.83" cy="196.33" rx="27.33" ry="36.33"/><ellipse class="cls-4" cx="396.96" cy="196.33" rx="27.33" ry="36.33"/><path class="cls-2" d="M398.29 218.22l3.98 12.27h12.9l-10.43 7.57 3.98 12.26-10.43-7.57-10.43 7.57 3.99-12.26-10.43-7.57h12.89l3.98-12.27zM28.96 218.22l-3.98 12.27h-12.9l10.43 7.57-3.98 12.26 10.43-7.57 10.43 7.57-3.99-12.26 10.43-7.57H32.94l-3.98-12.27z"/>
</svg>
<script>
/* document.querySelector('.face').addEventListener('click', function(){
this.classList.toggle('clicked-on');
}); */
$('.face').click(function(){
$(this).toggleClass('clicked-on');
});
</script>
</body>
</html>매우 감사합니다.