目标是拥有一个八边形形状的进度条。因此，我使用了多边形来创建形状，并尝试通过使用stroke-dasharray和stroke-dashoffset创建进度条效果。我希望彼此之间有三个八边形，它们都显示不同的百分比。
HTML：
.octagon-svg {
width: 100%;
opacity: 50%;
position: absolute;
margin: auto;
}
.octagon {
vector-effect: non-scaling-stroke;
fill: none;
stroke: black;
stroke-width: 5px;
margin: auto;
}
#octagon-1 {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
}
.square-section {
flex-direction: column;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-content: center;
position: absolute;
}<div class="square-section" id="section-two">
<svg class="octagon-svg" id ="octagon-one" width="90%" height="90%" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon class="octagon" id="octagon-1"
points="136.737609507049,188.692435121084 63.2623904929514,188.692435121084 11.3075648789165,136.737609507049 11.3075648789165,63.2623904929514 63.2623904929513,11.3075648789165 136.737609507049,11.3075648789165 188.692435121084,63.2623904929513 188.692435121084,136.737609507049"/>
</svg>
<svg class="octagon-svg" width="60%" height="60%" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon class="octagon" id="octagon-2"
points="136.737609507049,136.737609507049"/>
</svg>
<svg class="octagon-svg" width="30%" height="30%" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon class="octagon" id="octagon-3"
points="136.737609507049,136.737609507049"/>
</svg>
</div>
那是我已经得到的。当我调整窗口大小时，整个事情变得更加混乱。我尝试了很多，但没有正常工作。如何使用这些八边形作为进度条，它们如何保持响应状态？