SVG边框实现蚁行线效果

实现效果的关键是下面两个 CSS 属性

• stroke-dasharray - 控制虚线的长短和间隔
• stroke-dashoffset - 控制第一段虚线离起始位置的距离

---

Sample

/* 定义CSS */
@keyframes polygon {
  0%{           
    stroke-dashoffset: 0;
  }
  100%{
    stroke-dashoffset: 100;
  }
}

.polygon {
  fill: transparent;
  stroke: #3FA9F5;
  stroke-width: 2;
  stroke-dasharray: 10, 5;
  stroke-dashoffset: 0;
}

.polygon.polygon_animate {
  animation: polygon 2s linear infinite;
}