엣지 SVG 애니메이션 크로스브라우징 이슈 해결 방법

안녕, 오늘은 SVG 애니메이션 크로스브라우징 이슈에 관한 이야기야. 현 블로그에 Header 영역에 SVG 애니메이션을 사용했다. 크롬을 디폴트를 해서 작업을 했고, 크로스브라우징을 확인하기위해 엣지를 열었다. 

엣지는 마이크로소프트 윈도우10에 탑재된 차세대 브라우저이다. IE SVG 애니메이션 크로스브라우징은 일찍이 포기한 상태였기에, 당연히 엣지에서는 정상적으로 표현될 줄 알았다. 최신이잖아. 최신. 하지만 기대와 달리 엣지에서도 크로스브라우징 이슈가 발생했는데, 아래 이미지와 같이, 직선 애니메이션은 표현되지만, 곡선 애니메이션이 표현되지 않았다. 

    
    @keyframes dash {    to {  stroke-dashoffset: 0;    }  }
  
      #path03 {stroke-dasharray: 500;   stroke-dashoffset: 500;   
    animation: dash 5s 1.65s linear forwards;}

      #path02 {stroke-dasharray: 500;   stroke-dashoffset: 500;  
    animation: dash 5s 1.2s linear forwards; }
  
      #path01 {stroke-dasharray: 500;   stroke-dashoffset: 500;  
    animation: dash 5s 0.5s linear forwards; }
  
      #path04 {stroke-dasharray: 500;   stroke-dashoffset: 500;  
    animation: dash 5s 1.75s linear forwards;  }
   
     path clip-path="url(#SVGID_2_)" fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" 
d="M76-1.3l0.2,37.9c0,0-1.2,3.9-2,5.1c-0.6,0.9-2.3,2.5-3.2,3.
1c-0.8,0.5-2.7,1.3-3.7,1.5c-0.9,0.2-3.7,0.2-3.7,0.2H61"

기존의 사용되었던 코드다. Css를 통해 모션을 줬는데, 5s 부분이 모션 길이 1.65s가 모션 시작을 의미한다. 하지만 엣지에서는 3번과 2번만 구현이 되었는데, 여러 시도를 하였는데, 자바스크립트를 활용한 모션, CSS링크 연결, EMBED된 svg에서는 작동하지 않았다. 하지만 이 문제는 너무나도 쉽게 해결되었다. 

    
    @keyframes dash {    to {  stroke-dashoffset: 0PX;    }  }
  
      #path03 {stroke-dasharray: 500;   stroke-dashoffset: 500;   
    animation: dash 5s 1.65s linear forwards;}

      #path02 {stroke-dasharray: 500;   stroke-dashoffset: 500;  
    animation: dash 5s 1.2s linear forwards; }
  
      #path01 {stroke-dasharray: 500;   stroke-dashoffset: 500;  
    animation: dash 5s 0.5s linear forwards; }
  
      #path04 {stroke-dasharray: 500;   stroke-dashoffset: 500;  
    animation: dash 5s 1.75s linear forwards;  }
   
     path clip-path="url(#SVGID_2_)" fill="none" stroke="#000000" stroke-width="3px" stroke-miterlimit="10px" 
d="M76-1.3l0.2,37.9c0,0-1.2,3.9-2,5.1c-0.6,0.9-2.3,2.5-3.2,3.
1c-0.8,0.5-2.7,1.3-3.7,1.5c-0.9,0.2-3.7,0.2-3.7,0.2H61"

너무나도 쉬운 해결 방법. 단위를 표시해주면 된다. 엣지는 단위가 없는 dashoffset를 해석하지 못했다. 혹시나 하는 마음에 PX를 입력했고, 곡선도 자연스럽게 처리가 되었다. 해결. 하지만 아직도 IE라는 진흙탕에 있는 기분이다. GIF든 Css모션이든 대안을 마련해야겠다.