【发布时间】：2020-06-05 05:52:06
【问题描述】：
在我的代码图标下方：
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120">
<style>.st0{fill:#bcbbbb}.st1{fill:#f48023} </style>
<path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/>
<path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/>
</svg>动画脚本：
- 购物车轮廓绘制动画
- 用篮子填充轮廓颜色
- 5 条彩色条纹出现的顺序动画
- 条带以相反的顺序消失。
- 环状外观，彩色条纹消失。
这是我的尝试：
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120" style="border:1px solid;">
<style>
.st0{fill:white; stroke:#BCBBBB; stroke-width:2;}
.st1{fill:#f48023;opacity:1;}
</style>
<path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150">
<!-- Cart outline drawing animation -->
<animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />
<!-- Filling baskets of the icon color -->
<animate id="bask_fill" attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
</path>
<path class="st1" d="M38 86H76.6V78.3H38V86Z">
<animateTransform attributeName="transform" type="rotate" begin="bask_fill.end" dur="4s" values="0 100 100;45 100 100;0 100 100" repeatCount="indefinite" />
</path>
<text x="30" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>
</svg>我希望彩色条纹一个接一个地出现，在最后一个条纹出现后，它们应该以相反的顺序消失。
我没有成功应用轮换来解决这个问题。
任何解决方案的帮助将不胜感激。
【问题讨论】：
标签： javascript css svg