如何为SVG元素绑定点击事件以触发自定义CSS位移动画效果

• 选择器使用错误：document.getElementsByClassName("polygon")是查找类名为polygon的元素，但你的HTML里polygon是标签名，没有设置对应的类，无法匹配到目标元素。
• 类数组操作错误：getElementsByTagName/getElementsByClassName返回的是HTMLCollection类数组对象，不能直接调用setAttribute方法，需要遍历每个元素单独操作。
• 类赋值逻辑错误：两次调用setAttribute给同一个元素设置class属性，后设置的会直接覆盖前一个，两个类无法同时生效；且你有2个polygon元素，需要分别给两个元素设置不同的动画类。
• 变量未声明：clicked、addclass未使用let/const声明，会隐式成为全局变量，容易造成命名冲突。
• 样式可见性问题：现有CSS给polygon设置的填充色是白色，如果父容器背景也是白色，会看不到SVG元素，无法确认动画效果。

首先调整CSS（修改填充色方便测试，可按需改回）：

#more-arrows {
  width: 75px;
  height: 85px;
}
#more-arrows polygon {
  fill: #333; /* 临时修改为深灰色，方便查看效果 */
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.arrow-behind {
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
}
.arrow-front {
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}

HTML结构不需要改动，JS代码修改为：

const clicked = document.getElementById("more-arrows");
clicked.addEventListener("click", opened);

function opened() {
  // 获取所有polygon标签元素
  const polygons = document.querySelectorAll("#more-arrows polygon");
  // 分别给两个箭头设置不同的动画类
  polygons[0].classList.add("arrow-behind");
  polygons[1].classList.add("arrow-front");
  
  // 如果需要点击切换动画效果，可替换上面两句为：
  // polygons[0].classList.toggle("arrow-behind");
  // polygons[1].classList.toggle("arrow-front");
}

如果需要更有层次感的动画效果，可以给两个箭头设置不同的过渡延迟，按需添加即可。

内容的提问来源于stack exchange，提问作者József Kiss