Question

所以我有这个箭头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>

Answer 1

使用CSS Transforms和JavaScript非常简单。使用JS来监听click事件以及何时打开或关闭一个类（具有CSS /* Send a multi-part message consisting of three parts to socket */ rc = zmq_send ( socket, "ABC", 3, ZMQ_SNDMORE ); assert (rc == 3); rc = zmq_send ( socket, "DEFGH", 5, ZMQ_SNDMORE ); assert (rc == 5); /* Final part; no more parts to follow */ rc = zmq_send ( socket, "JK", 2, 0 ); assert (rc == 2);）。

在下面的代码片段中，我使用了内联SVG（即transform: rotate标记内的SVG，因为SVG文件没有托管到任何地方进行链接）但你也可以使用外部SVG文件。只需添加侦听器并将类设置为md-icon元素或包含SVG的元素。

md-icon

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

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

我们当然可以使用两个不同的SVG文件并在点击时更改源（从向下箭头到右箭头），但这不会像下面的代码段那样产生平滑过渡。

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

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

1 个答案: