최근 프로젝트에서 아이콘으로 간단한 애니메이션을 요청하는 작업이 잦았는데,
평소에는 각각 이미지를 잘라서 css나 tweenmax로 작업했지만 각각 위치도 잡아줘야하고 완전 불편했다...
SVG를 자주 사용하게 되면서 편한 방법이 없을까 생각중에 정리를 하게 되었다!

SVG 장점

  1. SVG는 벡터이미지로 확대해도 깨지지 않는다
  2. 같은 이미지를 사이즈/색상 변경해서 재사용하기 쉽다
  3. 기존 처럼 모션에 사용할 이미지의 요소들을 분리할 필요가 없다

구현 방법

SVG를 활용해서 모션을 구현하기 위해 javascript/CSS를 이용해서 테스트 해보았다

javascript(TWEENMAX) / CSS 공통 셋팅

  1. 사용할 요소의 코드를 지워보거나 fill값 변경해보며 특정함
  2. g 태그를 사용해서 해당코드를 감싸줌(그룹핑)
  3. g 태그에 id / class를 추가하여 사용

tip. 이미 g태그로 감싸져 있어도 transform 속성이 있으면 다시 감싸야함 (기준점이 달라짐)

1. javascript(TWEENMAX)

트윈맥스를 사용하여 기존처럼 쉽게 모션 구현이 가능하다

① SVG 코드 안에 요소를 컨트롤하기 위해 object 태그를 사용

inline으로 작업하면 소스가 더러워지기 떄문에 object 태그방법을 선호

② object 태그에 id값 추가

<object id="svgIcon" type="image/svg+xml" data="images/test.svg"></object>

③ SVG 코드 안에 사용할 요소들에 g 태그로 감싸고 아이디 추가

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 40 40">
    <g fill="none" fill-rule="evenodd">
      <g transform="translate(-406 -806) translate(0 776) translate(48 30) translate(302) translate(56)">
        <circle cx="20" cy="20" r="19.5" fill="#FFF" stroke="#E8E8E8"/>
        
          <g id="svgIconItem">
              <g transform="translate(4.615 4.615)">
                  <g fill="#4229BC">
                    <path d="M6.923 1.538L15.385 15.385 -1.538 15.385z" transform="translate(10 6.923) rotate(90 6.923 8.462)"/>
                  </g>
              </g>
        </g>
     </g>
  </g>
</svg>

③ 트윈맥스로 기존처럼 모션 구현

//javascript
window.onload = function () {
	var svgIcon = document.getElementById("svgIcon").contentDocument;
	var svgIconItem = svgIcon.getElementById("svgIconItem");
	TweenMax.to(svgIconItem, 0.5, {
		transformOrigin: "center",
		opacity: 0,
		yoyo: true,
		repeat: -1,
		ease: Power4.easeIn,
	});
};
//jquery
window.onload = function () {
	$(function(){
		var svgIcon=$('#svgIcon')[0].contentDocument;
		TweenMax.to($(svgIcon).find('#svgIconItem'), 0.5, {
			transformOrigin: "center",
			opacity: 0,
			yoyo: true,
			repeat: -1,
			ease: Power4.easeIn,
        });
    });
}

jsfddle테스트

2. CSS

기존 CSS 애니메이션처럼 구현 가능하다

① img, object 태그 or background 속성 사용 가능

<img src="images/test.svg" alt="">

② SVG 코드 안에 사용할 요소들에 g 태그로 감싸고 아이디 추가

③ SVG 코드 바로 안에 style 넣어서 기존 처럼 CSS 애니메이션 구현

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 40 40">
    <style type="text/css">
        #svgIconItem{ animation:motion01 1s infinite; transform-origin:50% 50%}
        @keyframes motion01{
            from{ opacity:0; }
            to{ opacity:1;transform:rotate(180deg) }
        }
    </style>
    <g fill="none" fill-rule="evenodd">
      <g transform="translate(-406 -806) translate(0 776) translate(48 30) translate(302) translate(56)">
        <circle cx="20" cy="20" r="19.5" fill="#FFF" stroke="#E8E8E8"/>
        <g id="svgIconItem">
          <g transform="translate(4.615 4.615)">
            <g fill="#4229BC">
              <path d="M6.923 1.538L15.385 15.385 -1.538 15.385z" transform="translate(10 6.923) rotate(90 6.923 8.462)"/>
            </g>
          </g>
        </g>
      </g>
  </g>
</svg>

jsfddle테스트


IE 호환

javascriptcss
IEIE9이상 가능불가능(transform 속성 지원하지 않음)
profile
작업하다 알게 되는 잡지식 정리 👩🏻‍💻

0개의 댓글