SVG影片虛線邊框路徑，如進度條-有解無憂

我正在嘗試像進度條一樣為虛線 SVG 圓圈設定影片 - 以在 3 秒內填充自己，但很難用虛線邊框實作這種效果。這是我目前擁有的代碼，它具有影片效果，但不像進度：

svg circle {
  animation: dash 3s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
    <circle stroke="#000000" pathLength="215" stroke-width="7" fill="transparent" stroke-dasharray="6 6" r="57" cx="60" cy="60"/>
    </svg>

https://codepen.io/xtnciwuu-the-selector/pen/abLXOJO

任何幫助將不勝感激

uj5u.com熱心網友回復：

這里有兩個不同的例子。第一個有點“hacky”，因為我用所有的點、空格和隨后的長空格對 dasharray 進行了硬編碼。

第二個示例使用掩碼。影片圓/破折號被遮蓋，所以它看起來像更小的破折號。

它為您提供了同一影片的兩種不同表達方式。

svg circle#c1 {
  animation: dash1 3s linear forwards;
}

@keyframes dash1 {
  from {
    stroke-dashoffset: 36;
  }
  to {
    stroke-dashoffset: 0;
  }
}

svg circle#c2 {
  animation: dash2 3s linear forwards;
}

@keyframes dash2 {
  from {
    stroke-dasharray: 0 36;
  }
  to {
    stroke-dasharray: 36 36;
  }
}

<svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle id="c1" stroke="#000000" pathLength="36" stroke-width="7" fill="transparent"
  stroke-dasharray="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 36"
  r="57" cx="60" cy="60" transform="rotate(-90 60 60)" />
</svg>

<svg class="progress-ring" viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="m1">
      <circle stroke="white" pathLength="36" stroke-width="7" fill="transparent"
      stroke-dasharray="1 1" r="57" cx="60" cy="60" />
    </mask>
  </defs>
  <circle id="c2" mask="url(#m1)" stroke="#000000" pathLength="36" stroke-width="7"
  fill="transparent" stroke-dasharray="18 36" r="57" cx="60" cy="60"
  transform="rotate(-90 60 60)" />
</svg>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/411704.html

標籤：

上一篇：如何使用VBA代碼將文本插入富文本文本框

下一篇：有路徑時如何修剪SVG的冗余部分