如何使用 css stroke-dasharray 为我的多边形设置动画？

Question

我有一个包含两个多边形的 SVG。我想从头到尾为第一个多边形设置动画，然后为第二个多边形设置动画。 动画将像填充一样工作。

我只想使用 stroke-dasharray 和 css 关键帧。

如果您想使用它，我会提供一支笔。 https://codepen.io/anon/pen/byVpjM

<svg height="600" width="800">
   <polygon class="animateFirst1" points="60 548,171 548,170 266,300 345,297 273,293 213,113 67,54 68"/>
   <polygon class="animateSecond2" points="291 211,295 279,298 345,404 259,402 552,512 551,513 60,457 60,440 60"/>
</svg>

所以我正在寻找的输出是，动画从 M 的左下角开始，在右下角结束。任何帮助将不胜感激。

Answer 1

带有破折号动画的多边形会像这样影响边框（我只实现了前半部分）。是你想要达到的吗？

@keyframes dash {
  to {
    stroke-dashoffset: 10;
  }
}

svg {
  width: 200px;
}

.animateFirst1 {
  stroke: red;
  stroke-width: 17;
  stroke-dasharray: 1450;
  stroke-dashoffset: 1450;
  animation: dash 2s linear forwards;
}

 <svg viewBox="0 0 600 800">
  <polygon class="animateFirst1" points="293 213,113 67,54 68,60 548, 171 548, 170 266,300 345"/>
</svg>

Answer 2

我想这就是你想要的。但是，您必须重新考虑绘制多边形的方式。

我将多边形用作<clipPath> 来剪切非常粗的路径笔划。

svg{border:1px solid;width:90vh}
path{fill:none;}
polygon{fill:none;stroke:black;}

#thePath{stroke-dasharray:1261.554931640625;stroke-dashoffset:1261.554931640625;
animation: dash 5s linear forwards;}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewBox="0 0 600 800">
   <defs>
             <clipPath id="clip" >
               <polygon class="animateFirst1" points="60 548, 171 548, 170 266, 300 345,297 273,293 213,113 67,54 68"/>
               <polygon class="animateSecond2" points="291 211,295 279,298 345,404 259,402 552,512 551,513 60,457 60,440 60"/>
            </clipPath>
        </defs>
                   
   <path id="thePath" stroke="gold" d="M110,550L114,155L296,280 450,140V555" stroke-width="140" style="clip-path:url(#clip)"  />
   
   <polygon class="animateFirst1" points="60 548, 171 548, 170 266, 300 345,297 273,293 213,113 67,54 68"/>
               <polygon class="animateSecond2" points="291 211,295 279,298 345,404 259,402 552,512 551,513 60,457 60,440 60"/>
   
</svg>