SVG 标记的惊人动画

Question

是否可以交错 SVG 标记的动画以与线条动画同步，即标记在其后面的线变得可见的同时变得可见？

我尝试像这样（如下）单独定位标记，但没有成功：

.marker-circle:nth-child(1) {
  animation-delay: 200ms;
}

<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">
  
 <defs>
   <marker class="marker" id="marker" markerWidth="4" markerHeight="4" refX="2" refY="2">
   <circle class="marker-circle" cx="2" cy="2" r="2" />
   </marker>
  </defs>
<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;
  background-color: red;
  animation-name: example;
  animation: example 5s infinite;
}

@keyframes example {
  from {fill-opacity:0.0;}
  to {fill-opacity:1.0;}
}


.marker-circle:nth-child(1) {
  animation-delay: 200ms;
}

.marker-circle:nth-child(2) {
  animation-delay: 400ms;
}

.marker-circle:nth-child(3) {
  animation-delay: 600ms;
}

.marker-circle:nth-child(4) {
  animation-delay: 800ms;
}

.marker-circle:nth-child(5) {
  animation-delay: 1000ms;
}

.marker-circle:nth-child(6) {
  animation-delay: 1200ms;
}

.marker-circle:nth-child(7) {
  animation-delay: 1400ms;
}

.marker-circle:nth-child(8) {
  animation-delay: 1600ms;
}
    

</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" marker-start="url(#marker)" marker-mid="url(#marker)"/>
</svg>

Answer 1

您可以为第二个多边形上的点属性设置动画，以便它获得越来越多的“点”。时机是需要猜测的事情...

.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 linear;
}
.line2 {
  fill:none;
  fill-opacity:0.46;
  stroke:transparent;
  stroke-width:8;
  stroke-miterlimit:10;
}

@keyframes draw {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
   
   
.marker-circle {
  fill:#FF4F4F;
  fill-opacity:1;
  background-color: red;
}

<svg xmlns="http://www.w3.org/2000/svg" width="300" viewBox="0 0 800 800">
 <defs>
   <marker class="marker" id="marker" markerWidth="4" markerHeight="4" refX="2" refY="2">
   <circle class="marker-circle" cx="2" cy="2" r="2" />
   </marker>
  </defs>
<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" pathLength="2000" />
<polygon class="line2" 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" marker-start="url(#marker)" marker-mid="url(#marker)" pathLength="2000">
<animate attributeName="points"
      values="266.14,191.92;
      266.14,191.92 471.86,127.15;
      266.14,191.92 471.86,127.15 530.52,302.39;
      266.14,191.92 471.86,127.15 530.52,302.39 666.14,388.49;
      266.14,191.92 471.86,127.15 530.52,302.39 666.14,388.49 550.33,633.06;
      266.14,191.92 471.86,127.15 530.52,302.39 666.14,388.49 550.33,633.06 225.76,580.49;
      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;
      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;
      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"
      keyTimes="0;.11;.2;.28;.45;.62;.75;.88;1"
      dur="5s"
      repeatCount="indefinite" />
</polygon>
</svg>