클릭 할 때 SVG를 앞뒤로 회전시키는 방법은 무엇입니까?

Question

그래서이 div SVG를 숨기거나 표시하기 위해 사용하고 있습니다. 클릭 할 때마다 화살표를 앞뒤로 회전시킬 수 있습니까?

HTML :

<md-icon md-svg-icon="assets/svg/down-arrow.svg"></md-icon> 

SVG :

<?xml version="1.0" encoding="iso-8859-1"?> 
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="arrow" x="0px" y="0px" viewBox="0 0 386.257 386.257" style="enable-background:new 0 0 386.257 386.257;" xml:space="preserve" width="24px" height="24px"> 
<polygon points="0,96.879 193.129,289.379 386.257,96.879 " fill="#e18327"/> 
</svg> 

Answer 1

그것은 CSS 변환 및 자바 스크립트와는 매우 간단합니다. JS를 사용하여 click 이벤트를 수신하고 클래스 (CSS transform: rotate 포함)를 켜거나 끕니다.

아래의 코드에서 인위적 SVG (즉, md-icon 태그 내의 SVG를 사용했습니다. SVG 파일은 링크 할 위치로 호스팅되지 않으므로) 외부 SVG 파일로도 가능합니다. 리스너를 추가하고 클래스를 md-icon 요소 나 SVG가 포함 된 요소에 설정하면됩니다.

document.querySelector('md-icon').addEventListener('click', function() { 
 
    this.classList.toggle('rotated'); 
 
});

.rotated { 
 
    transform: rotate(-90deg); 
 
} 
 
md-icon { 
 
    display: inline-block; 
 
    transition: all 1s; 
 
}

<link href="http://rawgit.com/angular/bower-material/master/angular-material.min.css" rel="stylesheet"/> 
 
<md-icon md-svg-icon='assets/svg/down-arrow.svg'> 
 
    <?xml version="1.0" encoding="iso-8859-1" ?> 
 
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="arrow" x="0px" y="0px" viewBox="0 0 386.257 386.257" style="enable-background:new 0 0 386.257 386.257;" xml:space="preserve" width="24px" height="24px"> 
 
    <polygon points="0,96.879 193.129,289.379 386.257,96.879 " fill="#e18327" /> 
 
    </svg> 
 
</md-icon>

우리가 할 수의 코스 두 개의 서로 다른 SVG 파일을 사용하고 클릭에 (오른쪽 화살표 아래로 화살표에서) 소스를 변경하지만 아래의 조각 같은 부드러운 전환을 생성하지 것이다 .

또 다른 선택은 SMIL 애니메이션을 사용했지만 더 이상 사용되지 않으므로 CSS 변환을 사용하는 것이 좋습니다.