SVG边框实现蚁行线效果

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

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

Sample

<!-- 示例 html 片段 -->
<polygon points="420 320, 230 320, 200 300, 200 100,390 100,420 120" class="polygon polygon_animate"></polygon>

/* 定义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;
}