如何像Whatsapp在狀態屏做的那樣，給圖像視圖添加動態虛線邊框？

我圈出了我想要實現的功能

您可以將svg cirlces與stroke-dashoffset和stroke-dasharray一起使用來創建這種效果。

在下面的示例中，stroke-dashoffset是使用2 * PI * circleRadius /(項目數)計算的。第二個值是每個弧之間的間距。

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" fill="none" stroke="green" stroke-width="4" stroke-dasharray="150 2" stroke-dashoffset="-2"/>
  </svg>
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" fill="none" stroke="green" stroke-width="4" stroke-dasharray="100 2" stroke-dashoffset="-2"/> 
</svg>

下面是使用上面的@阿克謝示例代碼的真實例子 從“react”導入React

function StatusCircle() {
    const numberOfDots = 2 * 3.14 * 48 / (5) //10 number of statues //48 is the radius of the circle
  return (
      <svg width="100" height="100" viewBox="0 0 100 100">
       <circle cx="50" cy="50" r="48" fill="none" 
       stroke="green" stroke-width="4" stroke-dasharray={`${numberOfDots} 2 `} 
       stroke-dashoffset={numberOfDots}/>
     </svg>
  )
}

export default StatusCircle