【发布时间】：2021-01-01 18:14:24
【问题描述】：
我有 2 个 svg，我正试图从中创建一个进度条。第一个是弯曲的路径，但是，我设法使用stroke-dasharray="400 400" 和stroke-dashoffset="-110" 使其工作（用于mask 以填充进度。效果很好。
我遇到的问题是直线，我想创建一个类似的进度条来填充进度，但它不起作用，我一直在试图找出原因可能 3 个小时。 .. 更改stroke-dasharray 和stroke-dashoffset 我无法让面具填充点.. 我不知道我做错了什么。
这是我想要达到的效果的参考
我已附上我的代码：
body {
background: #171B42;
}
.locked {
text-align: center;
margin: 44px auto;
width: 230px;
position: relative;
margin-top: 180px;
display:inline-block;
}
.locked img {
width: 60px;
margin: 0 26px;
}
.locked.row-1 svg {
width: 163px;
height: 175px;
position: absolute;
top: -130px;
right: -50px;
z-index: -1;
}
.locked.row-2 svg {
width: 77px;
height: 30px;
position: absolute;
top: -54px;
right: 74px;
z-index: -1;
}<!-- CURVED PROGRESS -->
<div class="locked row-1">
<svg viewBox="0 0 163 175">
<defs>
<mask id="mask">
<path stroke-dasharray="400 400" stroke-width="10" stroke-dashoffset="-110" stroke="white" d="M0 16.7246C54 16.7246 145.7 11.6246 146.5 85.2246C147.3 158.825 51 158.225 0 158.225"></path>
</mask>
<path id="path" fill="none" d="M0 16.7246C54 16.7246 145.7 11.6246 146.5 85.2246C147.3 158.825 51 158.225 0 158.225"></path>
</defs>
<!-- solid wide line -->
<use href="#path" stroke="rgba(255,255,255,0.05)" stroke-width="30"></use>
<!-- solid narrow line -->
<use href="#path" stroke="rgba(255,255,255,0.12)" stroke-width="15"></use>
<!-- dotted full line -->
<use href="#path" stroke="rgba(255,255,255,0.2)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round"></use>
<!-- dotted masked line -->
<use href="#path" stroke="rgba(255,255,255,0.8)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round" mask="url(#mask)"></use>
</svg>
<img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
</div>
<!-- LINE PROGRESS -->
<div class="locked row-2">
<svg viewBox="0 0 77 17">
<defs>
<mask id="mask-2">
<path stroke-dasharray="400 400" stroke-width="10" stroke-dashoffset="10" stroke="white" d="M76.6841 8.40967H0.551514"></path>
</mask>
<path id="path-2" fill="none" d="M76.6841 8.40967H0.551514"></path>
</defs>
<!-- solid wide line -->
<use href="#path-2" stroke="rgba(255,255,255,0.05)" stroke-width="30"></use>
<!-- solid narrow line -->
<use href="#path-2" stroke="rgba(255,255,255,0.12)" stroke-width="15"></use>
<!-- dotted full line -->
<use href="#path-2" stroke="rgba(255,255,255,0.2)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round"></use>
<!-- dotted masked line -->
<use href="#path-2" stroke="rgba(255,255,255,0.8)" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round" mask="url(#mask-2)"></use>
</svg>
<img src="https://i.imgur.com/h3ElY2f_d.webp?maxwidth=728&fidelity=grand">
</div>有什么想法吗？谢谢！
【问题讨论】：
-
也许它需要是一条线而不是一条路径？
-
或者为 mask2 创建一个自定义矩形，因为直线没有高度，并且 mask 似乎没有将笔画宽度视为高度的一部分...