单击另一个div时为SVG线设置动画

Question

我试图实现这个目标：

单击带有onclick功能的Div，然后将css动画应用于svg行。到目前为止，无法正常工作:(这是我的代码：

生成动画的图标：

<div class="hexagon1" onclick="ani()">
    <img id="hexagon-icon1" src="images/hexagon-icon1.png"/>
</div>

对于我想要制作动画的行：

<div id="left-line-animated-container-left">
    <img id="animationline" src="images/line-animated.svg">
</div>

动画的CSS：

.line-animated {
  -webkit-animation-name: cssAnimation;
  stroke-dasharray: 800;
  stroke-dashoffset: 0;
  -webkit-animation: dash 5s ease ;
  -o-animation: dash 5s ease ;
  -moz-animation: dash 5s ease ;
  animation: dash 5s ease ;
  display: block;
}

@-webkit-keyframes cssAnimation {
  from {
    stroke-dashoffset: 800;
  } 
  to {
    stroke-dashoffset: 0;
  }
}

和我的JAVASCRIPT：

function ani(){
   document.getElementById('animationline').className ='line-animated';
}

有什么建议:)？谢谢！