實現效果的關鍵是下面兩個 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;
}