如何动画我的多边形使用css笔画-Dasharray？
我有一个包含两个多边形的SVG。我想动画的第一个多边形从头到尾和动画的第二个多边形之后。动画将像填充一样工作。
<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的左下方开始，到右下方结束。任何帮助都将不胜感激。
共有1个答案
我想这就是你想要的。然而，你必须重新考虑你绘制多边形的方法。
我使用多边形作为
来切割非常粗的路径笔画。
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>-
本文向大家介绍用css画一个五边形和一个六边形相关面试题，主要包含被问及用css画一个五边形和一个六边形时的应答技巧和注意事项，需要的朋友参考一下 还有 svg 转 base64 作背景图。 当然，点击范围可能会不符合需求。 另外提一句，clip-path 边框要另做，元素选择的背景图要另做，两种都不好做圆角。
-
本文向大家介绍用css画一个平行四边形相关面试题，主要包含被问及用css画一个平行四边形时的应答技巧和注意事项，需要的朋友参考一下 ：沿着X轴Y轴2D倾斜旋转 ：沿着X轴2D倾斜旋转 ：沿着Y轴2D倾斜旋转
-
**有没有办法使用gganimate包对此地图进行动画处理，其中第一帧仅填充检测日期为2002年的多边形，第二帧填充的多边形，检测日期为2003年或更早（因此为2002年和2003年），第三帧用于检测日期为2004年或更早（2002年，2003年， 2004年），等等？**澄清：我希望所有县多边形始终可见，并且最初用白色填充，并且动画的每个帧都会根据检测年份添加县的填充。 我尝试使用与静态绘图，但
-
问题内容： 我需要知道如何在画布上绘制多边形。不使用jQuery或类似的东西。 问题答案： 使用和创建一个路径：
-
本文向大家介绍如何用CSS 画一个三角形？相关面试题，主要包含被问及如何用CSS 画一个三角形？时的应答技巧和注意事项，需要的朋友参考一下 参考回答： 三角形原理：边框的均分原理
-
主要内容：@keyframes 规则,animation-name,animation-duration,animation-timing-function,animation-fill-mode,animation-delay,animation-iteration-count,animation-direction,animation-play-state,animation通过《 CSS过渡》一节的学习我们知道，利用 transition 属性可以实现简单的过渡动画，但过渡动画仅能指定开始