SVG路径动画不在chrome中工作

Question

.circle{
  opacity:1;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  -webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
  -moz-transition: stroke-dashoffset 1s 0.5s ease-out;
  -ms-transition: stroke-dashoffset 1s 0.5s ease-out;
  -o-transition: stroke-dashoffset 1s 0.5s ease-out;
  transition: stroke-dashoffset 1s 0.5s ease-out;
}

.drawn svg .circle{
  opacity: 1;
  stroke-dashoffset: 0;
}

       

小提琴：

https://jsfiddle.net/cq26yjp2/

在Firefox中运行良好，不确定似乎是什么问题