将 SVG 图标用作手风琴菜单中的单击图标时如何转换/反转 SVG 图标

Question

我正在尝试使用 jQuery 和 SVG 创建手风琴菜单。
然后，我尝试使用 SVG 箭头图标作为点击按钮，但
我无法使图标灵活旋转。
这是我的Codepen。

//SVG Arrow Icon
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 48 48" enable-background="new 0 0 48 48" width="30" height="30" class="svg_arrow">
<rect class="st0" width="30" height="30"/>
<path class="st1" d="M16,28l7.5-7.5c0.9-0.9,2.2-0.9,3.1,0L34,28" stroke="#2dac9a"/>
</svg>

//SVG CSS
svg{
  fill: #2dac9a;
  position: absolute;
  top: 15px;
  right: 10px;
  transform: rotate(180deg);
}

.tr{
  transform: rotate(0deg);
}

$('.faq_accordion').on('click', function () {
  $(this).children().eq(1).slideToggle(300);
  $(this).children('.faq_li').toggleClass('b');
  $(this).children('.faq_li').find('svg')[0].setAttribute('class', 'tr'); //does not work...
  $(".faq_accordion .faq_answer").not($(this).children().eq(1)).slideUp(300);
});

当我单击 SVG 箭头图标时，“setAttribute”方法有效，
但是当我再次单击它时，我不知道如何反转位置。
在我看来，“toggleAttribute”方法也不起作用......（我试过了。）

如果您教我有效的方法，我将不胜感激。
如果这个问题已经在另一个部分解决了，我很抱歉。
谢谢。

Answer 1

.tr{
  transform: rotate(0deg);
} // revome this

svg{
     fill: #2dac9a;
     position: absolute;
     top: 15px;
     right: 10px;
     transform: rotate(180deg);
     transition: transform 300ms; // Add this
}

.b svg {
    transform: rotate(0deg); 
} // Add this