stroke-dasharray и stroke-dashoffset для заполнения прогресса

Question

У меня есть 2 SVG, из которых я пытаюсь создать индикатор выполнения. Первый - это изогнутый путь, однако мне удалось заставить его работать, используя stroke-dasharray="400 400"и stroke-dashoffset="-110"(который используется в a 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>

Есть идеи? Спасибо!

Answer 1

Во втором и последнем экземпляре stroke="rgba(255,255,255,0.2)"измените непрозрачность с 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

Итак, я разобрался с проблемой. Я нашел решение из другого вопроса о переполнении стека.

Таким образом, вы не можете замаскировать форму, например, горизонтальную или вертикальную линию (ограничивающая рамка с нулевой высотой / нулевой шириной), используя параметры маски по умолчанию. Просто добавьте "maskUnits =" userSpaceOnUse "в свой элемент маски, чтобы исправить.

Для получения дополнительной информации: SVG: маска не работает должным образом.

Так что мне просто пришлось добавить maskUnits="userSpaceOnUse"в свойmask

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>