[html]모양이 변하는 svg 만들기

See the Pen svg click event / svg 클릭 이벤트 by sangmok-ye (@sangmok-ye) on CodePen.

 

 

준비물 : 2개 이상의 svg파일

 

참고 사이트1 : https://app.haikei.app/

참고 사이트2 : http://mm.sookmyung.ac.kr/~sblim/lec/svg-smil04/svg04-13.htm

<svg>
  <g>
    <path></path>
  </g>
</svg>
//기본 태그 구조

<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
	<g transform="translate(432.8721244421574 307.02908402183886)">
		<path d="M133.9 -134.4C183.4 -84.4 240.2 -42.2 236.8 -3.4C233.4 35.4 169.7 70.7 120.2 
        117.2C70.7 163.7 35.4 221.4 -16.9 238.2C-69.1 255.1 -138.1 231.1 -171.6 184.6C-205.1 
        138.1 -203.1 69.1 -202.4 0.7C-201.6 -67.6 -202.3 -135.3 -168.8 -185.3C-135.3 -235.3 
        -67.6 -267.6 -12.7 -254.9C42.2 -242.2 84.4 -184.4 133.9 -134.4" fill="none" 
        stroke="#BB004B" stroke-width="6"></path>
	</g>
</svg>
//svg 다운받으면 나오는 구조

아무것도 움직이지 않는 선만 나옴

<svg>
  <g>
    <path>
      <animate></animate>
    </path>
  <g>
</svg>
// path태그 사이에 animate추가


  <svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/
  2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
	  <g transform="translate(436.5926261230395 334.47959234047704)">
		<path fill="none" stroke="#BB004B" stroke-width="6" d="M117.3 -130.1C154.5 -80.1 188.7 -40.1 198.8 10C208.8 60.1 194.5 120.2 
            157.4 148.9C120.2 177.5 60.1 174.8 -4.2 179C-68.6 183.3 -137.2 194.5 -162.2 
            165.8C-187.2 137.2 -168.6 68.6 -165.9 2.7C-163.2 -63.2 -176.3 -126.3 -151.3 
            -176.3C-126.3 -226.3 -63.2 -263.2 -11.5 -251.6C40.1 -240.1 80.1 -180.1 117.3 
            -130.1">
			<animate attributeName="d" dur="5s" repeatCount="indefinite"
			values="M117.3 -130.1C154.5 -80.1 188.7 -40.1 198.8 10C208.8 60.1 194.5 120.2 
            157.4 148.9C120.2 177.5 60.1 174.8 -4.2 179C-68.6 183.3 -137.2 194.5 -162.2 
            165.8C-187.2 137.2 -168.6 68.6 -165.9 2.7C-163.2 -63.2 -176.3 -126.3 -151.3 
            -176.3C-126.3 -226.3 -63.2 -263.2 -11.5 -251.6C40.1 -240.1 80.1 -180.1 117.3 
            -130.1; 
			
			M164.5 -175.9C203.2 -125.9 217.6 -62.9 212.4 -5.2C207.2 52.6 182.5 105.1 143.8 
            152.8C105.1 200.5 52.6 243.2 8.6 234.6C-35.4 226 -70.7 166 -105 118.4C-139.4 
            70.7 -172.7 35.4 -182.6 -9.9C-192.5 -55.2 -179 -110.3 -144.6 -160.3C-110.3 
            -210.3 -55.2 -255.2 3.9 -259C62.9 -262.9 125.9 -225.9 164.5 -175.9; 
			
			M133.9 -134.4C183.4 -84.4 240.2 -42.2 236.8 -3.4C233.4 35.4 169.7 70.7 120.2 
            117.2C70.7 163.7 35.4 221.4 -16.9 238.2C-69.1 255.1 -138.1 231.1 -171.6 
            184.6C-205.1 138.1 -203.1 69.1 -202.4 0.7C-201.6 -67.6 -202.3 -135.3 -168.8 
            -185.3C-135.3 -235.3 -67.6 -267.6 -12.7 -254.9C42.2 -242.2 84.4 -184.4 133.9 
            -134.4;
			
			M117.3 -130.1C154.5 -80.1 188.7 -40.1 198.8 10C208.8 60.1 194.5 120.2 157.4 
            148.9C120.2 177.5 60.1 174.8 -4.2 179C-68.6 183.3 -137.2 194.5 -162.2 
            165.8C-187.2 137.2 -168.6 68.6 -165.9 2.7C-163.2 -63.2 -176.3 -126.3 -151.3 
            -176.3C-126.3 -226.3 -63.2 -263.2 -11.5 -251.6C40.1 -240.1 80.1 -180.1 117.3 
            -130.1
			"></animate>
		</path>
	</g>
</svg>


// path태그에 있는 속성 d를 animate values로 삽입
// 추가로 더 다운받은 svg의 path d속성을 animate values에 추가
// 추가된 속성 구분은 세미콜론으로 할 것

// attributeName="d" 패스속성d를뜻하는거같음
// repeatCount="1" 의 경위 1회만 재생됨 숫자 혹은 "indefinite"로 작성

animate속성에 begin="click" 을 넣을 시 js click event같이 전환됨

→ begin="mouseover" end="mouseout"

→ fill="freeze" 추가 시, 마지막 모양에서 멈춤 (디폴트값은 remove)

 

path values 값을 처음과 끝을 똑같이 해줘야 끊기지않는 svg동작이 가능

path fill속성이 none일 경우 fill를 클릭해도 click event가 발생하지않음

→rgba opa0처리 후 fill 클릭 가능

 

restart = "always" , "whenNotActive" , "never"

→ 애니메이션 발생 후 언제 다시 시작할것이냐 

ex) whenNotActive : 1회의 애니메이션이 모두 종료가 된 후 재시작

 

 

values값을 중간을 제외하고 by로 작성도 가능

<svg>
  <g>
    <path d="svg코드1" >
    <animate attributeName="d" dur="1s" repeatCount="1" begin="mouseover" 
    fill="freeze" values="svg코드1; svg코드2; svg코드1;"></animate>
  </g>
</svg>

// 상동

<svg>
  <g>
    <path d="svg코드1" fill="#1ab900">
    <animate attributeName="d" dur="1s" repeatCount="1" begin="mouseover" 
    fill="freeze" by="svg코드2;"></animate>
  </g>
</svg>