stroke-dasharray et stroke-dashoffset pour remplir une progression

Question

J'ai 2 svg sur lesquels j'essaye de créer une barre de progression. Le premier est un chemin courbe, cependant, j'ai réussi à le faire fonctionner en utilisant stroke-dasharray="400 400"et stroke-dashoffset="-110"(qui est utilisé sur a maskpour remplir la progression. Cela fonctionne très bien.

Le problème que j'ai est la ligne droite, je voudrais créer une barre de progression similaire où elle remplit la progression, mais cela ne fonctionne pas et j'essaie de comprendre pourquoi depuis peut-être 3 heures maintenant ... le stroke-dasharrayet stroke-dashoffsetje n'ai pas pu obtenir le masque pour remplir les points .. Je ne sais pas ce que je fais de mal.

Voici une référence pour l'effet que j'essaie d'obtenir

J'ai joint mon code:

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>

Des idées? Je vous remercie!

Answer 1

Dans l'avant-dernière instance de stroke="rgba(255,255,255,0.2)", modifiez l'opacité de 0.2à 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

J'ai donc compris le problème. J'ai trouvé la solution à partir d'une autre question de stackoverflow.

Vous ne pouvez donc pas masquer une forme comme une ligne horizontale ou verticale (zone de délimitation de hauteur zéro / largeur zéro) à l'aide des paramètres de masque par défaut. Ajoutez simplement "maskUnits =" userSpaceOnUse "à votre élément de masque pour corriger.

Pour plus d'informations: SVG: le masque ne fonctionne pas comme prévu

Alors j'ai juste fini par devoir ajouter maskUnits="userSpaceOnUse"à monmask

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>