求助：React Native SVG实现带重叠端点的环形进度条

我想要实现一个环形进度条，目标效果为带有特定裁剪的弧形进度显示，但始终无法实现所需的裁剪效果，当前实现的进度条不符合预期。

我使用React Native SVG进行开发，以下是我的代码：

import React, { useEffect, useRef } from "react";
import { View, StyleSheet, Animated } from "react-native";
import Svg, { Circle, Defs, LinearGradient, Stop, G } from "react-native-svg";

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

interface ProgressRingProps {
  size: number;
  strokeWidth: number;
  progress: number; // Value between 0 and 1
  gradientColors: string[]; // Array of colors for the gradient
  backgroundColor: string;
  startAngle?: number; // Angle in degrees
}

const ProgressRing = ({
  size,
  strokeWidth,
  progress,
  gradientColors,
  backgroundColor,
  startAngle = 0, // Default start angle is 0 (top)
}: ProgressRingProps) => {
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;

  const animatedValue = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: progress,
      duration: 500,
      useNativeDriver: true,
    }).start();
  }, [progress]);

  const strokeDashoffset = Animated.multiply(
    animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [circumference, 0],
    }),
    1
  );

  const rotation = startAngle - 90; // Adjust for SVG's coordinate system (90 degrees is the top)

  return (
    <View style={{ width: size, height: size }}>
      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <Defs>
          <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
            <Stop offset="0%" stopColor={gradientColors[0]} stopOpacity="1" />
            <Stop offset="100%" stopColor={gradientColors[1]} stopOpacity="1" />
          </LinearGradient>
        </Defs>
        <Circle
          stroke={backgroundColor}
          fill="none"
          cx={size / 2}
          cy={size / 2}
          r={radius}
          strokeWidth={strokeWidth}
        />
        <G transform={`rotate(${rotation}, ${size / 2}, ${size / 2})`}>
          <AnimatedCircle
            stroke="url(#grad)"
            fill="none"
            cx={size / 2}
            cy={size / 2}
            r={radius}
            strokeWidth={strokeWidth}
            strokeLinecap="round"
            strokeDasharray={`${circumference} ${circumference}`}
            strokeDashoffset={strokeDashoffset}
          />
        </G>
      </Svg>
    </View>
  );
};

const styles = StyleSheet.create({});

export default ProgressRing;

我已经为此耗时多日仍无法实现该效果，恳请帮助我完成此功能开发。

谢谢

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