如何在点击时来回旋转SVG？答案

【问题标题】：How to rotate SVG back and forth on click?如何在点击时来回旋转SVG？
【发布时间】：2016-06-03 11:58:26
【问题描述】：

所以我有这个箭头 SVG，我用它来隐藏/显示一个 div。如何在每次点击时来回旋转该箭头？

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>

【问题讨论】：

你需要使用JS来捕捉点击，然后分配一个CSS变换。这是你需要的吗？
我不确定哪种方法最好用，不过对我来说并没有太大的不同。
我不知道这个md-icon 是如何工作的。只是搜索了一下，看起来它们是 Angular + Material Icons。你知道标签是否在最终的 HTML 中按原样输出（或）它是否被转换为其他标签？你有一个我可以用来回答的小提琴吗（或者）如果我给出一个通用的解决方案，你能适应它吗？
您不必关注 md-icon，只需将其视为常规 SVG 即可。我的问题是如何旋转这个 svg，它会像“>”箭头。如果您还需要我提供更多信息，请告诉我。

标签： css svg rotateanimation

【解决方案1】：

使用 CSS 转换和 JavaScript 非常简单。使用 JS 监听 click 事件，并在它发生时打开或关闭一个类（具有 CSS transform: rotate）。

在下面的 sn-p 中，我使用了内联 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 文件并在点击时更改源（从向下箭头到向右箭头），但这不会产生像下面的 sn-p 那样的平滑过渡。

另一种选择是使用 SMIL 动画，但它们已被弃用，因此最好使用 CSS 转换。

【讨论】：

在空项目中效果很好，但在我的平台中存在一些问题。即使很好的例子。谢谢