Stroke-Dasharray und Stroke-Dashoffset, um einen Fortschritt zu füllen

Question

Ich habe 2 SVGs, aus denen ich einen Fortschrittsbalken erstellen möchte. Der erste ist ein gekrümmter Pfad, aber ich habe es geschafft, ihn mit stroke-dasharray="400 400"und stroke-dashoffset="-110"(der auf a verwendet wird mask, um den Fortschritt zu füllen. Es funktioniert sehr gut.

Das Problem, das ich habe, ist die gerade Linie. Ich möchte einen ähnlichen Fortschrittsbalken erstellen, in dem der Fortschritt ausgefüllt wird, aber er funktioniert nicht und ich habe versucht herauszufinden, warum das jetzt vielleicht 3 Stunden dauert ... Ändern das stroke-dasharrayund stroke-dashoffsetich konnte die Maske zu füllen in den Punkten nicht bekommen .. ich weiß nicht , was ich falsch mache.

Hier ist eine Referenz für den Effekt, den ich erzielen möchte

Ich habe meinen Code angehängt:

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>

Irgendwelche Ideen? Vielen Dank!

Answer 1

stroke="rgba(255,255,255,0.2)"Ändern Sie in der vorletzten Instanz von die Deckkraft von 0.2auf 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

Also habe ich das Problem herausgefunden. Ich habe die Lösung aus einer anderen Frage zum Stapelüberlauf gefunden.

Sie können also eine Form wie eine horizontale oder vertikale Linie (Begrenzungsrahmen Nullhöhe / Nullbreite) nicht mit Standardmaskenparametern maskieren. Fügen Sie einfach "maskUnits =" userSpaceOnUse "zu Ihrem Maskenelement hinzu, um das Problem zu beheben.

Weitere Informationen: SVG: Maske funktioniert nicht wie erwartet

Also musste ich einfach maskUnits="userSpaceOnUse"meine hinzufügenmask

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>