stroke-dasharray y stroke-dashoffset para completar un progreso

Question

Tengo 2 svg de los que estoy tratando de crear una barra de progreso. La primera es una ruta curva, sin embargo, he logrado que funcione usando stroke-dasharray="400 400"y stroke-dashoffset="-110"(que se usa en un maskpara completar el progreso. Funciona muy bien.

El problema que tengo es la línea recta, me gustaría crear una barra de progreso similar donde se complete el progreso, pero no funciona y he estado tratando de averiguar por qué durante unas 3 horas ... Cambiando el stroke-dasharrayy stroke-dashoffsetno pude conseguir la máscara de relleno en los puntos .. no sé lo que estoy haciendo mal.

Aquí hay una referencia del efecto que estoy tratando de lograr.

Adjunto mi código:

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>

¿Algunas ideas? ¡Gracias!

Answer 1

En la penúltima instancia de stroke="rgba(255,255,255,0.2)", cambie la opacidad de 0.2a 0.8.

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.8)" 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>

Answer 2

Entonces resolví el problema. Encontré la solución de otra pregunta de stackoverflow.

Por lo tanto, no puede enmascarar una forma como una línea horizontal o vertical (cuadro delimitador de altura cero / ancho cero) utilizando los parámetros de máscara predeterminados. Simplemente agregue "maskUnits =" userSpaceOnUse "a su elemento de máscara para corregirlo.

Para obtener más información: SVG: la máscara no funciona como se esperaba

Así que acabé teniendo que añadir maskUnits="userSpaceOnUse"a mimask

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" maskUnits="userSpaceOnUse">
      <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>