如何实现SVG标记动画与线条动画的错峰同步？

你之前的方法无效，是因为所有标记都复用了同一个<marker>定义里的<circle>元素——DOM中只有一个.marker-circle元素，:nth-child(n)选择器根本找不到多个独立的标记实例，自然无法设置不同的动画延迟。

要实现标记与线条绘制同步显现，需要为每个顶点创建独立的标记元素，然后根据线条绘制到该顶点的时间，设置对应的动画延迟。具体步骤如下：

1. 移除SVG中的<marker>定义，直接在每个顶点位置添加独立的<circle>标记。
2. 计算线条每段的长度，根据总动画时长（5秒），算出每个顶点对应的绘制时间，作为标记的动画延迟。
3. 使用CSS变量统一管理延迟时间，让标记在线条绘制到该点时同步显现。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800">
  
<style type="text/css">
.line {
  fill:none;
  fill-opacity:0.46;
  stroke:#3BB0FF;
  stroke-width:8;
  stroke-miterlimit:10;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: draw 5s infinite;
}

@keyframes draw {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
   
.marker-circle {
  fill:#FF4F4F;
  fill-opacity:0.0;
  /* 标记只需要淡入一次，保持显示状态 */
  animation: fadeIn 5ms forwards;
  /* 用CSS变量设置延迟 */
  animation-delay: var(--delay);
}

@keyframes fadeIn {
  to {fill-opacity:1.0;}
}
</style>

<!-- 多边形线条 -->
<polygon class="line" points="266.14,191.92 471.86,127.15 530.52,302.39 666.14,388.49 550.33,633.06 225.76,580.49 359.86,363.34 
    153.38,388.49"/>

<!-- 各个顶点的标记点，延迟时间根据线条绘制进度计算 -->
<circle class="marker-circle" cx="266.14" cy="191.92" r="2" style="--delay: 0ms"/>
<circle class="marker-circle" cx="471.86" cy="127.15" r="2" style="--delay: 540ms"/>
<circle class="marker-circle" cx="530.52" cy="302.39" r="2" style="--delay: 1000ms"/>
<circle class="marker-circle" cx="666.14" cy="388.49" r="2" style="--delay: 1400ms"/>
<circle class="marker-circle" cx="550.33" cy="633.06" r="2" style="--delay: 2080ms"/>
<circle class="marker-circle" cx="225.76" cy="580.49" r="2" style="--delay: 2800ms"/>
<circle class="marker-circle" cx="359.86" cy="363.34" r="2" style="--delay: 3440ms"/>
<circle class="marker-circle" cx="153.38" cy="388.49" r="2" style="--delay: 3960ms"/>
</svg>

• 延迟时间是根据每段线条长度占总stroke-dasharray（2000）的比例，乘以动画总时长（5000ms）计算得出，确保标记与线条绘制进度完全同步。
• 标记的动画使用forwards属性，淡入后保持显示状态，避免重复动画。

内容的提问来源于stack exchange，提问作者marklovin