-
[에스비지] SVG (Scalable Vector Graphics) -(03편)- JS적용하기SVG 2021. 1. 31. 20:22
SVG image -face shape 이전시간에 만들어 본 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>매우 감사합니다.
'SVG' 카테고리의 다른 글