SwiftUI实现watchOS风格linear gauge线性仪表盘的优化求助

我已经实现了更接近预期效果的linear gauge，但仍需优化。我尝试使用圆角矩形作为遮罩，但效果不佳，非常欢迎大家提供改进建议。

GeometryReader { geometry in
    RoundedRectangle(cornerRadius: 7.5, style: .circular)
        .fill(LinearGradient(gradient: Gradient(colors: [Color.green, Color.yellow, Color.orange, Color.red, Color.purple]), startPoint: .bottom, endPoint: .top))
        .frame(width: geometry.size.width, height: geometry.size.height, alignment: .bottomLeading)
        .overlay(Color.black.opacity(0.35).cornerRadius(7.5))
    RoundedRectangle(cornerRadius: 7.5, style: .circular)
        .fill(LinearGradient(gradient: Gradient(colors: [Color.green, Color.yellow, Color.orange, Color.red, Color.purple]), startPoint: .bottom, endPoint: .top)
        .frame(width: geometry.size.width, height: geometry.size.height, alignment: .bottomLeading)
        .mask(
            VStack {
                Spacer()
                Rectangle()
                    // 可根据需求调整数值1
                    .frame(width: geometry.size.width, height:geometry.size.height * (CGFloat(1) / CGFloat(11)), alignment: .bottom)
            })
}
.frame(width: 15, height: .infinity)
.padding(.all, 10)

我尝试实现类似watchOS中的linear gauge线性仪表盘，当前遇到的难点是不知道如何正确叠加当前值指示器。预期实现效果和我目前的实现效果分别见下图，想请教更优的实现方案。

预期效果 #

当前个人实现效果（不佳） #

ZStack {
    LinearGradient(gradient: Gradient(colors: [Color.green, Color.yellow, Color.orange, Color.red, Color.purple]), startPoint: .bottom, endPoint: .top)
    GeometryReader { metrics in
        Circle()
            .stroke(Color.white,lineWidth: 2)
            .frame(minHeight: 0, maxHeight: metrics.size.height)
            .foregroundColor(Color.clear)
            .position(x: metrics.size.width / 2 ,y: metrics.size.height * (CGFloat(10) / CGFloat(11)))
    }
}
.cornerRadius(7.5)
.frame(minWidth: 0, maxWidth: 15)

内容的提问来源于stack exchange，提问作者cole