stroke-dasharray và stroke-dashoffset để lấp đầy một tiến trình

Question

Tôi có 2 svg mà tôi đang cố gắng tạo thanh tiến trình. Đầu tiên là một đường cong, tuy nhiên, tôi đã cố gắng làm cho nó hoạt động bằng cách sử dụng stroke-dasharray="400 400"và stroke-dashoffset="-110"(được sử dụng trên a maskđể lấp đầy tiến độ. Nó hoạt động rất tốt.

Vấn đề tôi đang gặp phải là đường thẳng, tôi muốn tạo một thanh tiến trình tương tự, nơi nó điền vào tiến trình, nhưng nó không hoạt động và tôi đã cố gắng tìm hiểu lý do tại sao có lẽ đã 3 giờ ... các stroke-dasharrayvà stroke-dashoffsettôi không thể làm mặt nạ để điền vào các dấu chấm .. tôi không biết những gì tôi đang làm sai.

Đây là tài liệu tham khảo về hiệu quả mà tôi đang cố gắng đạt được

Tôi đã đính kèm mã của mình:

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>

Có ý kiến ​​gì không? Cảm ơn bạn!

Answer 1

Trong trường hợp thứ hai đến cuối cùng của stroke="rgba(255,255,255,0.2)", thay đổi độ mờ từ 0.2thành 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

Vì vậy, tôi đã tìm ra vấn đề. Tôi đã tìm thấy giải pháp từ một câu hỏi stackoverflow khác ..

Vì vậy, bạn không thể che giấu một hình dạng như một đường ngang hoặc dọc (hộp giới hạn chiều cao bằng không / chiều rộng bằng không) bằng cách sử dụng các tham số mặt nạ mặc định. Chỉ cần thêm "maskUnits =" userSpaceOnUse "vào phần tử mặt nạ của bạn để sửa.

Để biết thêm thông tin: SVG: Mặt nạ không hoạt động như mong đợi

Vì vậy, tôi chỉ cần thêm maskUnits="userSpaceOnUse"vàomask

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>