How to rotate SVG back and forth on click?

Question

So I have this arrow SVG which I am using for hiding/displaying a div. How can I rotate that arrow back and forth on every click?

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>

You need to use JS to capture the click and then assign a CSS transform. Is that what you need? — Harry, Jun 03 '16 at 03:30
I'm not really sure which method is the best to use, doesn't make a lot of difference for me though. — Frutis, Jun 03 '16 at 03:35
I don't know how this `md-icon` thing works. Just searched a bit and looks like they are Angular + Material Icons. Do you know if the tag is output as-is in the final HTML (or) it gets converted to some other tag? Do you have a fiddle which I can use for the answer (or) if I give a generic solution would you be able to adapt it? — Harry, Jun 03 '16 at 03:41
You don't have to pay attention towards the md-icon, just treat it as regular SVG. My question is how to rotate this svg that it would be like ">" arrow. If you still need something more from me, please let me know. — Frutis, Jun 03 '16 at 03:52

score 3 · Accepted Answer · answered Jun 03 '16 at 03:58

It is very simple to do with CSS Transforms and JavaScript. Use JS to listen for the click event and when it happens toggle a class (which has the CSS transform: rotate) on or off.

In the below snippet, I've used an inline SVG (that is, SVG within the md-icon tag as the SVG file is not hosted anywhere to link to) but you can do that with external SVG files also. Just add the listener and set the class to the md-icon element or whatever is the element that contains the 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>

We can of-course use two different SVG files and change the source (from down arrow to right arrow) on click but that wouldn't produce a smooth transition like the below snippet.

Another choice would have been to use SMIL animations but they are being deprecated and hence it is better to use CSS transforms.

Works great in an empty project, but have some problems within my platform. Even though great example. Thanks — Frutis, Jun 03 '16 at 06:27

How to rotate SVG back and forth on click?

1 Answers1