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

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

我将多边形用作<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>

Answer 2

带有破折号动画的多边形会像这样边界（我只实现了前半部分）。这是您想要实现的目标吗？

 Navigator.push(context,PageTransition(type: PageTransitionType.scale,child:Calculator()));

@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;
}

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

2 个答案: