如何在svg上使用事件？

问：

我正在尝试在 HTML 中的 svg 元素上启动一个简单的动画，但效果不起作用。

我想补充一下：

.arrow-behind {
 -webkit-transform: translateY(-15px);
         transform: translateY(-15px);
}

.arrow-front {
  -webkit-transform: translateY(15px);
         transform: translateY(15px);
 }

对此，

HTML格式：

   <div class="content">
      <p>Hover me !</p>
      <svg id="more-arrows">
        <polygon  points="37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1 "/>
        <polygon  points="37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1 "/>
      </svg>
    </div>

CSS格式：

#more-arrows {
  width: 75px;
  height: 85px;
}

 #more-arrows polygon {
  fill: #FFF;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

有了这个，

JS：

clicked = document.getElementById("more-arrows");

clicked.addEventListener("click", opened)

function opened() {
  addclass = document.getElementsByClassName("polygon")
  addclass.setAttribute("class", "arrow-behind");
  addclass.setAttribute("class", "arrow-front");
}